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

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

非活性と非表示使い分け

Webアプリを作っていると避けて通れないのが、非活性と非表示です。

ネットサーフィンしても中々、この手の話が出てこない。

エンタープライズ向けの業務アプリとコンシューマー向けWebアプリのUI設計を
考える機会があったので、まとめてみました。

非活性と非表示の違いを知る

全てのUIが表示されている通常表示と非活性と非表示を比較。

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

通常と非活性

まずは、非活性

非活性は、ボタンが表示されているけど押せない状態のこと。

何か必要な情報が入力されていないと押せない場合に、よく使われます。

例えば、ログインボタンでユーザーIDやパスワードが入力されていない時のUIとしてよく使われます。

非活性.jpg

通常と非表示

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

非表示.jpg

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

コンシューマ向けアプリは、必要な機能を基本的にユーザーに提供していくことを目的にしているはず。

仮に、ユーザー登録をしなければいけないアプリだったとしても基本的にはボタンを押せるようにするため、
表示して活性状態しておく。ボタンをユーザーが押した時に登録済か判断する。そうすることによって離脱率を低くしています。

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

私がこれまでやってきたエンタープライズ向けのアプリだとよく非表示と非活性の概念を用います。

なぜなら、エンタープライズ向けのアプリは往々にしてボタンの数や入力エリアの数が多い。

例えば、以前私が携わったアプリでは、一覧の一つのリストから行えるメニューが20個以上ありました。

理由は、人によって使うボタンが変わります。

会社で行われる業務を賄うように作られるから機能がモリモリになって操作が多くなってしまいます。

どう使い分ける?

非活性

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

非表示

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

私の見解としては、基本的にはコンシューマー向けだろうが、エンタープライズ向けだろうが表示して、活性状態であることが望ましいです。
つまり、非活性と非表示を極力使うべきではないと思います。

押せないボタンや入力できないフォーム、消えているボタンがたくさん発生する場合は、
そもそもユーザーに使いやすい導線になっていないことが考えられます。

導線の見直しや機能分割をするべきである。

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