【翻訳】クリック数の最小化は優れたUXを意味しない（UX Collective, Avi Siegel）

UXデザインにおける機能の可用性へのパレート原理の適用

私が子供の頃に好きだった本のいくつかは、「ウォーリーを探せ」シリーズでした。本のリストを見ると、私は最初の4冊を持っていました - 青い1冊、赤い1冊、黄色い1冊、そしてハリウッドの1冊。二桁になる前にウォーリーをあきらめたようです。(とはいえ、私の「探し物」好きは、やがてクロスワードの連打、パズル探し、さらにはVR脱出ルームゲームの共同制作へと変化していきました)。

あなたの困惑した顔が目に浮かびます。なぜここでウォーリーが登場するのでしょうか？最近のいわゆるモダンなツールの多くは、「ウォーリーを探せ」を彷彿とさせるものが多すぎます。ユーザーが何かをしようとするとき、見るべき場所が無数に提示されることがよくあります。

このページにある何十ものクリック可能なUI要素のうちの1つかな？（タップ・タップ)
より深いコンテキストレベルでアクションを起こすには、項目をクリックする必要があるのかな？(どこだろう？）
オーバーフローメニューにあるのかな？それとも他のオーバーフローメニュー？それとも別のメニュー？(ウォーリー、ウォーリー、、、)
へっへっへ、このプロダクトのこのエリアにはあるのかな？（やばい、ナビゲーションに入っちゃった。ウォーリーを1つ見つけるのに、『ウォーリーを探せ』の本全体に目を通さなきゃ！)

これは9歳の子供には楽しいかもしれません。

ただ自分の仕事をしようとしている人にとっては、あまり楽しいことではありません。

もしあなたのユーザーが、あなたのプロダクトで「ウォーリーを探せ」ごっこをしているように感じるなら、この記事はあなたのためのものです。

クリック数を減らすことは良いこと

私たちは皆、このような要望を聞いたことがあります：「ユーザージャーニーをシンプルに！摩擦を減らしましょう！クリック数を最小限に！」これは、プロダクトマネージャーやUXデザイナーの叫びのようなものです。

表面的には、このクリックを減らす戦略は非常に理にかなっています。結局のところ、摩擦のないユーザー体験を望まない人はいないでしょう。

約束は実に魅力的です：

ユーザーが必要な機能をすぐに見つけて利用できるため、ユーザーエンゲージメントが向上します。
ユーザー満足度の向上：ユーザーは必要な機能をすぐに見つけて利用できるため、ユーザー満足 度が向上します。
コンバージョン率の向上。なぜなら、その価値が非常に価値あるものであるため、ユーザーはあなたにお金を投じるためにあなたのプロダクトを使うのを一時中断するだけだからです。
世界平和、なぜなら...そう、そう、遠すぎる

もちろん、ここでの問題は、「摩擦がない」というのは、学習曲線が死のループとなり、その結果、実際に素早く何かをする能力がすべてなくなってしまうような、「機能の利用可能性」が非常に高いプロダクトにとっては、かなり極端な言葉だということです。

...そうでなくなるまで

クリック数の削減がうまくいかないときは、本当にうまくいきません。

私は、基本的な機能を見つけることが目隠しされたルービックキューブを解くように感じられるほど「合理化」されたアプリを見てきました。私は、新しいクレヨンの箱を持った幼児が、線の内側に描くように、そしてすべての色を使わないようにと明確に依頼されてデザインしたようなダッシュボードを見たことがあります（ヒント：彼らはその逆です）。私が見たのは...おわかりでしょう。

すべてのアクションをシングルクリック（場合によってはゼロクリック）にしようとすると、単純にスケールしません。論理的な最終状態は、プロダクトが1つのページで、そこにすべてのコンテンツがあり、考えられるあらゆるアクションを取るための個別のボタンがあることです。

ハイフンでつながれた名字のようなものです。確かに、最初のうちは意味がありますが、ハイフンでつながれた名前の2人が結婚して、4つのハイフンでつながれた名前になるのを見たことがありますか？ないですか？それは全体のコンセプトが近視眼的だからです。

まだ納得いかない？以下にいくつかの例を挙げます。

機能過多

プロダクト開発チームは常に善意でスタートし、必要な機能すべてに簡単にアクセスできるようにしようとします。しかし、いつの間にかインターフェイスは、デジタルの宝庫のようになってしまいます。いったんそこまで到達してしまうと、そのアプローチは十分に裏目に出てしまいます。ユーザーに力を与えるのではなく、圧倒してしまうのです。その結果は？

ユーザーは、必要な機能を使うよりも探すことに多くの時間を費やすことになります。
新規ユーザーの学習曲線が 高くなることで、Time-to-Valueが 爆発的に増加し、オンボーディング成功率が急落します。
認知的負荷の増大はユーザーの疲労につながります。

ユーザーがクリックする場所を簡単に見つけられなければ、クリック数は重要ではありません。

Chrome, ナビゲーション, ヘッダーテイクオーバー

プロダクトが成長し、機能が拡張し、企業が完全に独立した姉妹プロダクトを構築するにつれ、チームはツールの非中核的な領域に多くのものを押し込む傾向があります。そのようなレイアウトの中には、TOCに閉所恐怖症の警告がないのが不思議なくらい、主要コンテンツのためのスペースが少ないものもあります。例えば、このClickUpのビデオ（タイムスタンプ2m16s）を見てください。7つ！1)検索、2)お気に入り、3)パンくず、4)ビュー、5)フィルター、6)グループ化、7)列。これらを合わせると、録画した画面の高さの40％近くを占めています。公正を期すために、これらのいくつかはコア・コンテンツの一部ですが、それでも、インターフェイスをもっと快適に使えるものに大幅に統合する方法は無数にあります。しかし、彼らはそれをそのままにしています。結果は？

またしても、ユーザーは検索（とスクロール）に時間をかけすぎ
またしても、認知的過負荷が現実のものに
そして最悪なのは、画面に表示されるもののほとんどは、実際には必要ではない*ということです。

ユーザーが、役に立つどころか邪魔になる無限のUIで溢れかえっているのであれば、クリック数は重要ではありません。

単純化しすぎ

反対に、クリックを最小限にすることを「うまく」やっているプロダクトチームもあります。赤ちゃんもお風呂のお湯も、浴槽も全部捨ててしまったようなものです。残っているのは、使いやすそうに見えるが、実際にはユーザーがやるべきことができないミニマリスト的なインターフェイスだけです。その結果は？

またしても、ユーザーは必要な機能を探すのに多くの時間を費やしてしまいます。
過度な単純化戦略は、ユーザーが望んでいない機能を与えることで、ユーザーが実際に望んでいる機能を置き換えるという過剰な修正につながりました（例えば、Redditの継続的な再設計の試みは、与える以上のものを奪い続けています）。
ユーザーは、実際に仕事をこなせる「プロ」の選択肢を見つけることで、最終的にあなたのプロダクトから「レベルアップ」します。

ユーザーがやろうとしたことを達成できないようなダサいプロダクトであれば、クリック数は重要ではありません。 では、クリック数を最小限にすることが目的でないとしたら、それは何なのでしょうか？よくぞ聞いてくれました！

クリック数ではなく、労力を最小限に

クリックを最小限にする」戦略がうまくいかない理由は、優先順位を間違えているからです。意図はそこにあるのですが、ゴールがその渦中に紛れ込んでしまったのです。クリック数の最小化は解決策です。その解決策が解決する問題は、プロダクトを使うのに労力がかかりすぎるということです。つまり、真の目的は労力を最小限にすることです。クリック数の最小化はそのための戦略ですが、包括的な目的を見失うと、フランケンシュタインのような怪物になってしまいます。では、どのように戦略をユーザーの努力の最小化に変えることができるのか、ステップバイステップで掘り下げていきましょう。

1.数学を理解する

まず、いくつかの数学。ユーザーがある行動に費やす努力の総量は、単にそれを1回行う努力ではなく、それを何度も行う努力の総量です。つまり

頻繁に実行されるアクションの場合、1回実行する労力は最小限にしたいものです。
めったに実行されないアクションの場合、そのアクションを1回実行するための労力はもっと大きくてもかまいません。

チャットアプリを例にとってみましょう。新しいチャットを始めたり、既存のチャットを探したり、メッセージを送ったりすることはよくあります。メッセージを編集したり、チャットを消したり、チャットを削除したりすることはあまりありません。グループチャットのメンバーを追加したり、削除したりすることも少ないでしょう。より頻繁に行うアクションはより簡単に利用できるようになり、より頻繁に行わないアクションはいくつかの余分なステップが削除されるはずです。 あるアクションを1回実行するのにかかる時間は問題ではなく、そのアクションを何回実行するのにかかる時間が問題なのです。

2.使用状況の分析

高レベルの計算ができたら、それを適用する必要があります。何人のユーザーが、どこで、どのくらいの頻度で、どのようなアクションをとっているのかを把握します。このデータは、定量的に取得することも、定性的に取得することもできます：

ユーザーテストを実施し、どのようなワークフローがユーザーに最も共感され、最も直感的であるかを直接確認します。
FullStory、Pendo、Mixpanel、PostHog、Datadogなどの幅広いツールを使用してユーザーを観察します。
プロダクトアナリティクスを導入し、集計を行いましょう（幸運なことに、上記の同じツールで集計も可能です）。
A/Bテストを実施し、どのレイアウトがユーザーの手にとって最も良いパフォーマンスを発揮するかを確認しましょう - UIオプションの自然淘汰のようなものです。
ユーザー自身が感じている痛みを体験できるように、プロダクトをドッグフード化しましょう（そうすることで、よりリアルになり、デス・バイ・1000カットの犠牲にならないようになります）。

上記のデータは、実際にはあなたが扱うべきものよりも大きな画像であることに注意してください。以下に基づいて分析を絞り込みましょう：

理想的な顧客像（ICP）：ICPでないユーザーを気にしてはいけないというわけではありませんが、ICPを念頭に置いて厳密にデザインしたいのです。
コンテキストの深さ： あるアクションは、一般的にはあまり実行されないかもしれませんが、プロダクト内の深い部分にある特定の関連する領域では必要かもしれません。例えば、私たちのチャットアプリでは、ユーザーはチャットのリストでグループチャットに誰がいるのかを気にすることはほとんどないかもしれませんが、個々のグループチャットにいるときはもっと頻繁に気にするかもしれません。
ユーザージャーニーの段階： ユーザーがプロダクトに慣れるにつれて、機能の使い方がどのように変化するかを考えてみましょう。新しいユーザーにとって重要なものは、より熟練したユーザーが必要とするものとは異なるかもしれません。
ユーザーの役割： 異なる権限を持つユーザーは、文字通り異なる機能にアクセスできます。例えば、管理者はより深いオプションのセットを持つことになりますが、管理者は余分な複雑さを期待するパワーユーザーであるため、通常は問題ありません。
デバイスとプラットフォーム： モバイルユーザーとデスクトップユーザー、または異なるオペレーティングシステム間では、利用パターンが大きく異なる場合があります。ユーザーがそれを実行するために必要な環境で達成する必要があるユースケースに焦点を当てましょう。それぞれの環境ごとに設計しましょう。

コア・ユーザーがどのようにプロダクトを使用しているかを深く理解する必要があります。典型的なワークフローは何か、標準的でないものは何か。どの機能が日々の使用にとって重要で、どの機能が青天の霹靂のように使われるのか？どのようなユーザーが、どのようにプロダクトにアクセスし、どのような機能が有効になっているのでしょうか？本当にユーザーのためにデザインするには、ユーザーの立場に立ち、彼らの痛みを理解する必要があります。

3.パレートの原則を考える

この時点で、あなたは（最も重要な）ユーザーがプロダクトをどのように使っているかを熟知しています。彼らにとって重要な機能は何か、どこでそれを使いたいのか、どれくらいの頻度でそれを使うのかがわかっているはずです。次にパレートへ。パレートの原則はこう教えてくれます：

20％の機能が80％の頻度で使用される（以降、これを「80％」と呼ぶことにします）。
機能の80%は20%の時間に使われます（以降、これを「20%」と呼びます）。

ユーザーが行う可能性のある各アクションについて、それがどのグループに入るかを把握する必要があります。これは厳密な科学ではありませんが、機能がどのようなスペクトルに分類されるかという一般的なアイデアは持っておきたいものです。後のステップで、ある機能が使用頻度の高いグループに属するか、低いグループに属するかによって、異なる設計上の決定を下すことになります。

すべての機能が同じように作られているわけではありません。あなたの仕事は、ユーザーのニーズだけでなく、そのニーズに対処する際のユーザーの経験についてもより良い設計ができるように、重要な少数と些細な多数とを分けることです。

4.ロングテールの20％のために複雑さを受け入れる

ここで言っている20%とは、20%の頻度で使われる80%の機能のことです。これは膨大な機能です。そしてその中には、時々使われるものもあれば、ほとんど使われないものもあります。

良いニュースは、これらのコンセプトをすべてコア・エクスペリエンスに押し込む必要がないということです。
悪いニュースとしては、そのすべてを使うために何か別のことを考えなければならないということです。

そこでようやく、楽しい部分であるデザインにたどり着きます。さらに具体的に言えば（そしてもっと楽しく言えば）、あなたのプロダクトを使いづらくしている機能をすべて取り除くことです。

（取り除くべき20％から始めることで、残すべき80％のためのUXを（再）デザインするための、よりクリーンなスレートが得られるからです。）あなたのためのいくつかの戦略

オーバーフローメニュー：楕円メニュー、ドット・ドット・ドット・メニューなどとも呼ばれます。これは、余分な機能を追加する最も簡単な方法です。クリック1つで、2階層目の機能をすべて隠すことができます。
設定ページ：古典的なページには理由があります。インターフェイスの屋根裏部屋のようなもので、頻繁に訪れることはないが、どこかに保存しておくことが重要な機能のためのものです。もちろん、これは設定オプションに限定すべきです（例えば、設定メニューにアナリティクスがあるプロダクトを見たことがありますが、それはやめましょう）。
統合：ある機能を1つのコンポーネントに統合することに意味がありますか？例えば、Gmailでは、フィルタオプションを「すべて選択」チェックボックス（すべて、なし、既読、未読、スター付き、未スター付きから選択可能）に付随する単一のドロップダウンに統合しています。これによって、ユーザーは非常にコンパクトなオプションにアクセスできるようになり、しかし全体的な認知の過負荷への影響は最小限に抑えられます。
どこにもない（与えられたコンテキストの中で）： 本当に、本当に、どの機能をどこで利用できるようにする必要があるのかを考えてください。すべての機能をどこからでも利用できるようにする必要はありません - 機能をあるべき場所（つまり、使われる場所）に配置しましょう。
機能の廃止：ロングテールの機能については、文字通り削除ボタンを押すことを検討してください。試してみるまで、それを非難しないでください。誰も必要としない機能を最終的にサポートしなくなるのは、実はとてもカタルシスのある経験なのです。

あなたのプロダクトができることすべてを1つのビューに押し込めようとしないでください。ユーザーが必要な瞬間に必要なものを見つけられないのであれば、最小限のクリック数で簡単にアクセスできることにはなりません。機能を隠したり削除したりする戦略はいくらでもあります。

5.80％の効率を改善

覚えておいてください-80%は機能全体の20%に過ぎません。それは、コアエクスペリエンスで有効にしなければならない機能が、これまでそこに押し込めようとしていた機能よりもはるかに少ないことを意味するからです。さらに、前のステップのおかげで、余計な機能はすべて取り除かれました。これで、遊べるスペースが大幅に増えました。(しかし、その事実を悪用しないでください）。では、ユーザーが80％の機能に簡単にアクセスできるようにするには、どのようなデザイン上の決定をすればよいのでしょうか？いくつかの戦略をご紹介しましょう：

フォーカス： 最も重要な機能にユーザーの注意を向けさせましょう。例えば、一次CTAはより注意を引き、二次CTAはあまり注意を引かないようにします。
統合： はい、これは80％でもまだリストに残っています。ボタンをたくさん並べるスペースがあるからといって、そうすべきとは限りません。やはり、ユーザーの正気を優先したいものです。
ワンクリックの可視性： あなたやあなたのユーザーが80％と考える機能がまだたくさんあるかもしれません。このような場合は特に、必要な情報やアクションをクリックの下に隠すことを検討してください。例えば、あなたのアプリがあるエンティティ（例えばタスク管理システムのタスク）に対して行われた変更の履歴を表示する場合、最初のビューではまだ見ぬ履歴のみを表示し、さらに遡る必要があるユーザーのためにワンクリックで追加の履歴を展開できるようにすることができます。

新たに確保した画面領域で、ユーザーの最も重要な機能をどのようにレイアウトするか、より良い選択ができるようになります。しかし、画面上にすべてを同時に表示し続けることで、このチャンスを無駄にしないようにしましょう。

おまけ：（ICPのサブセットである）パワーユーザーのための解決策

一般的には、上記のように、80％のICPのユースケースを解決すべきです。しかし、パワーユーザーについて触れないのは不注意です。

パワーユーザーとは、あなたのプロダクトから得られる価値を最大化するだけでなく、その価値を得るための効率も最大化するユーザーのことです。

特に、パワーユーザーはキーボードショートカットの大ファンです。彼らは、キーボードを何回か素早く押すだけで、どんなアクションでも起こしたいのです。あなたがどれだけ速くタイピングできるか考えてみてください。そう、このようなパワーユーザーは、あなたがプロダクト概要の一文を入力する速度で、何十ものアクションを実行することができます。

その好例として、以下をご覧ください：