Progressive Disclosure と Progressive Reduction

Web サイト上に提示される情報は、「シンプル」であるに越したことはありません。ユーザーの目的達成に関係しない情報ノイズは、極力、無いのがよいと言えるでしょう。

そして、その情報が不要なノイズかどうかは、ユーザーの目的の大小や粒度、ユーザー自身の当該分野に対するリテラシー (理解の度合い)、ユーザーの利用コンテキスト、などによって異なります。

この記事では、ユーザーに合わせて情報ノイズを排除する考えかたとして、「Progressive Disclosure」と「Progressive Reduction」について考えてみたいと思います。

Progressive Disclosure (プログレッシブ ディスクロージャー)

「Progressive Disclosure」とは、漸進的に (徐々に、段階的に) 情報を開示してゆく、という考えかたです。 ユーザーを圧倒することなく、タスクを進めるのに必要十分な情報だけをイニシャルで提示し、ユーザーの任意操作に応じた形で、詳細情報やさらなるオプションなどを提示します。

昨今の Web サイトのユーザーインターフェース (UI) で言うと、たとえば以下のような例が挙げられます。

もっとも、Web の場合、JavaScript などによるインタラクションを用いずとも、ハイパーリンクによるページ遷移が可能なので (メニューから概要説明ページへ、さらに各部の詳細説明ページへ...という具合に)、ある意味、そもそも「Progressive Disclosure」なメディアであると言えます。そう考えると、「Progressive Disclosure」という考えかたは別に新しいものではなく、UI パターンに留まる話でもなく、本質的には「どんな情報を」「どう提供するか」という基本的な情報設計 (IA) の話と言えそうです。

実際の UI 設計において「Progressive Disclosure」を検討する際には、漸進的開示のプロセスが多少なりともユーザーにとって負荷になる可能性があること (クリック/タップといった操作の身体的負荷、不慣れなインタラクションやフィードバックを認知/学習する負荷、など) を意識し、以下のような配慮によって「シンプルさ」と「ユーザー負荷」のバランスをうまく図るようにしましょう。

Progressive Reduction (プログレッシブ リダクション)

「Progressive Reduction」とは、漸進的に情報を減らしてゆく、という考えかたです。ユーザーのリテラシー向上に伴い「もはや当たり前のこと」「言うまでもないこと」を段階的に削減することで、情報の提示を次第にシンプルにしてゆきます。情報の削減 (シンプル化) は、基本的に自動的になされるのがよいでしょう (情報をシンプルにすること自体はユーザーの主目的ではなく、ユーザーの手を煩わすべきではないからです)。

「Progressive Reduction」という用語が初めて登場したのは、2013年2月に発表された「Progressive Reduction - LayerVault Blog」という記事です。この記事では、イニシャルでは「ラベル付きのアイコン」だったものを、ユーザーの経験 (慣れ) に応じて次第に「ラベル無しのアイコン」にし、さらには付加的な装飾を排したアイコンにしてゆく、という例が紹介されています。

スマートフォンのような小さな画面で閲覧するサイトでは特に、限られた面積の中で情報をシンプルに提示する必要があるため、アイコンだけの (ラベルの無い) ボタンが用いられるケースが少なくありません。ただし、アイコンだけでは意外とユーザーに正しく理解されなかったりするものです。ユーザーの利用回数や利用頻度といったデータを基に、最初はラベルを付けておいて、ある段階でラベルを消す、というアイコン表示にすれば、ユーザーに対する (さりげなくも効果的な) ヘルプとして役に立ちそうです。

「Progressive Reduction」によるアイコン表示の変化の例。紙飛行機のアイコンが「送信」である旨、三本線のアイコン (いわゆる hamburger icon) が「サイトのメニュー」である旨、イニシャルではラベルを明示し、ある段階でラベルを消す。
「Progressive Reduction」によるアイコン表示の変化の例 (「送信」ボタンと「メニュー」ボタン)

「Progressive Reduction」の考えかたは、アイコンのラベル以外にも応用できそうですが、情報の削減 (シンプル化) の度が過ぎると、かえってユーザーの認知/学習負荷を高めてしまう恐れもあります。デザイン検討時に、もし大幅に漸進的削減するのが妥当だと考えるならば、そもそも基本的な情報設計がきちんとできていない (詰め切れていない) のでは?...と疑ってみるのもよいかもしれません。

記事を共有

Twitter に投稿 Facebook に投稿 はてなブックマークに投稿 Pocket に追加