パワーユーザーのためのデザイン

すべてのボタンをクリックして回るユーザーは、もう去っています。あなたのプロダクトの中で暮らしているユーザーは、1日に20回それを開き、あなたがデザインした覚えのない隠れたインターフェースを暗記しています。他社のプロダクトにもっと優れた隠れたインターフェースがあれば、そのエキスパートはいなくなります。そして、お金を払うのはエキスパートというコホートです。

主流のUXは、初回体験とアクティベーションの話ばかりです。エキスパートはそのどれも目にしません。800回目にプロダクトを開き、Cmd-Kを叩き、仕事を一気に片付けるか、パレットが無関係な結果を5件返してきて怒りのままに離脱するかのどちらかです。パワーユーザーUXは「2つ目のプロダクト」であり、多くのチームはまだそれを出荷していません。

見えるプロダクトの裏にある、隠れたプロダクト

優れたプロダクトには、必ず2つのプロダクトが入っています。 新規ユーザー向けの見えるプロダクトと、すでに知っているユーザー向けの隠れたプロダクトです。

見えるプロダクトは、ボタン、メニュー、ツールチップ、ツアーでできています。隠れたプロダクトは、キーストローク、コマンドパレット、保存ビュー、複数選択、ルートでアドレス指定できる状態でできています。前者は最初のセッションを分かりやすくします。後者は、その後の1000回のセッションを速くします。

Linearは意図的に両方を出荷しています。新規ユーザーには、明確な主要アクションを持つすっきりしたインボックスが見えます。エキスパートは g、i でインボックスへ飛び、c でイシューを作成し、shift-クリックで複数選択し、すべての保存ビューは共有できるURLです。同じプロダクト。2つのプロダクト。どちらもデザインされています。

パワーユーザーは、失うわけにいかないコホート

初めてのユーザーは声が大きく、エキスパートは黙っています。だから多くのチームは声の大きい方に最適化します。パワーユーザーは月あたりの利用日数が多く、1席あたりの収益も高く、他のすべてのコホートを合わせたよりも多くの新規ユーザーを連れてきます。同時に、彼らは最も派手に去ります。競合3製品で「速さ」がどういうものかを知っているからです。

解決策は「ショートカットを足す」ことではありません。パワーユーザー向けの面を、独自のデザイン予算とロードマップを持つ第一級のプロダクトとして扱うことです。

パワーユーザーUXの5つのレイヤー

パワーユーザーUXは1つの機能ではありません。積み重なって効いてくる5つのレイヤーです。多くのプロダクトは1つか2つしか出荷しません。最高のプロダクトは5つすべてを出荷し、レイヤー同士が互いを強化します。

1. コマンドパレット

Cmd-Kのパレットは、検索と実行を統合した面です。1回のキー操作で、プロダクト内のあらゆるアクション、ルート、オブジェクトが、直近の利用と頻度の順に並んで呼び出されます。Linearのパレットが基準です。Raycastは同じプリミティブの上にOSレイヤーを丸ごと築きました。Notion、Vercel、GitHub、Slackも、それぞれ自前のものを出荷しています。

本物のパレットは、コンテンツとアクションを同じ入力欄で検索し、すべての結果の横にキーストロークのヒントを表示し、引数をその場で受け付けます。「イシューを進行中に移動」が、4クリックの連鎖ではなく1つのコマンドとして動きます。失敗パターンは検索専用のパレットです。ドキュメントは見つけられてもアクションを実行できない箱は、妄想を抱えた検索バーです。Cmd-Kの要点は、見つけて、実行することです。パレットの初期状態がなぜ重要かは、空の状態こそプロダクトの解説で扱っています。

2. 第一級のシステムとしてのキーボードショートカット

ショートカットは、ヘルプのモーダルに隠されたキー割り当ての一覧ではありません。発見しやすさ、一貫性、段階的な深さを備えたシステムです。Superhumanが金字塔です。すべてのアクションにキーがあり、チートシートはプロダクト内に組み込まれ、オンボーディングはマウスより先にキーボードを教えます。

Linearは、拡張性のある二文字ペアの仕組みを採用しています。1文字目が面を表し(g は go)、2文字目が行き先を表します(i はインボックス、p はプロジェクト、m は自分のイシュー)。ユーザーはルールを1つ覚えるだけで、50のショートカットが使えるようになります。Notionはコマンド用のスラッシュとパレット用のCmd-Kを備えています。Figmaは1文字のツールを備えています(V は移動、R は矩形、F はフレーム、T はテキスト)。Gmailのキーボードショートカットは、20年経った今でもメールの金字塔です。

システムこそがプロダクトです。単発のショートカットの山はシステムではなく、チームが削除し忘れたバックログです。

3. 保存ビュー、フィルター、ブックマーク

エキスパートは、自分のワークフローを中心にプロダクトを組み立てます。Linearの保存ビューはサイドバーに並び、ログアウトしても残り、URLで共有でき、リアルタイムに更新されます。Notionのフィルター済みデータベースビューは、コンテンツで同じことをします。Stripeの保存済み検索は、異常を拾う正確なフィルターを保存します。Vercelはブックマークごとにチームとプロジェクトを固定するので、目的のダッシュボードは1キーストローク先にあります。

譲れない条件があります。保存した状態はアドレス指定できなければなりません。すべての保存ビューに、ログアウト、デバイスの切り替え、チームメイトへの共有を越えて生き残るURLが必要です。localStorageにしかない状態は、ユーザーが別のノートPCでプロダクトを開いた瞬間に消えます。

4. 一括操作

エキスパートは1日に100個のオブジェクトを触ります。プロダクトはそれを支えるか、罰するかのどちらかです。Linearの shift-クリックによる複数選択と、B での一括更新は定番です。Notionのデータベースの複数選択は、30行にまたがるステータス、担当者、タグを一度に変更できます。Gmailのショートカットと shift-J のおかげで、大量のインボックスでも耐えられます。

一括操作には3つの性質が必要です。選択がはっきり分かること。アクションがキーボードから届くこと。取り消しが本物であること。右クリックメニューの奥にある一括操作は使われない一括操作であり、キー1つで取り消せない一括操作は、最初に失敗したときに信頼を壊します。

5. パワー専用の面

エキスパートのためだけに存在する面があります。FigmaのAPIコンソール、Raycastの拡張ライブラリ、Notionのデータベース管理ビュー、Vercel CLI、CronとNotion Calendarのキーボード専用タイムブロックレイヤー。これらは、エキスパートが住み着く深層のレイヤーです。

Raycastが最も分かりやすい例です。土台はコマンドパレットです。エキスパートは拡張機能とカスタムスクリプトをインストールし、パレットを自分専用のOSレイヤーに変えます。Notionのデータベースも同じ形です。初心者にはリストが見え、エキスパートにはロールアップと数式を備えたリレーショナルなデータモデルが見えます。

パターンは、段階的な深さです。プログレッシブディスクロージャーの原則が要となる考え方です。深さはホーム画面ではなく、1キーストローク先にあります。

コマンドパレットの内側

Cmd-Kのパレットは最も重要なパワーユーザー向けの面ですが、多くのチームは貧弱なものを出荷します。強いパレットと、仮装した検索バーを分ける要素は5つあります。

優れたパレットは、直近の利用と頻度で結果を並べ、すべての結果の横にキーストロークのヒントを出し、引数をその場で受け付け、文脈に絞り込み、Esc 1回で閉じます。Linearは5つすべてをこなします。Raycastも5つすべてをこなし、パレットをプロダクト全体にしてしまいます。多くのパレットは2つしかこなせず、ユーザーは無視することを覚えます。

パワーユーザーUXをデザインする5つのルール

本物のパワーユーザー向けの面と、ヘルプのフッターに放り込まれたショートカット一覧を分ける5つのルールがあります。4つ満たせば、たいていその面は機能します。2つしか満たせなければ、エキスパートは去ります。

1. すべてのアクションにキーがある。 マウスでできることは、キーボードでもできるべきです。
2. キーを、見せつけずに見せる。 パレット、ツールチップ、メニュー行にキーストロークのヒントを。ショートカットは、ユーザーがマウスに手を伸ばす瞬間に見えているべきで、設定ページの奥に埋もれていてはいけません。
3. 複数選択は分かりやすくなければならない。 見えるチェックボックス、または明確な shift-クリックのパターン。ユーザーが存在を知らない一括操作は、存在しない一括操作です。
4. 保存した状態はアドレス指定できなければならない。 URLベース、永続的、共有可能。ブラウザの中にしかない状態は、消える状態です。
5. パワーの面は1キーストローク先にある。 Cmd-K、スラッシュ、または1文字。エキスパートがそこまで移動しなければならないなら、それは機能ページであって、パワーの面ではありません。

5つのうち4つを満たすプロダクトは、エキスパートの手の中で生きているように感じられます。2つしか満たさないプロダクトは、キーボードの小技を数個ねじ込んだだけのウェブサイトに感じられます。

チームがエキスパートを忘れたことを示すアンチパターン

他の何よりも多くのパワーユーザー向けの面を殺すパターンが5つあります。

ブラウザと衝突するショートカット。 Webアプリ内で Ctrl-W や Ctrl-T を割り当て直すと、タブが閉じてユーザーは未保存の作業を失います。代わりにCmd-Kの中で名前空間を切りましょう。

3クリック奥のヘルプモーダルにしか書かれていないショートカット。 設定、ヘルプ、キーボードショートカットの奥にあるチートシートは、ユーザーが決して目にしないものです。アクションの瞬間にキーを見せましょう。Superhumanはチートシートを第一級の画面として出荷しています。多くのプロダクトは、誰もクリックしないことを願うフッターのリンクとして出荷します。

右クリックが必要な複数選択。 コンテキストメニューの中の一括操作は、ユーザーのためではなく、変更履歴のために存在しています。

基本的なショートカットに対するProプランの課金壁。 キーボードショートカット、パレット、保存ビューを「Pro」プランの裏にロックするプロダクトがあります。ショートカットは機能ではなく、機能の使われ方です。それを塞ぐことは、プロダクトそのものを塞ぐことです。

ログアウトで消える保存ビュー。 localStorageにしかないフィルターは、ユーザーが別のデバイスでプロダクトを開くと消えてしまいます。サーバーに永続化し、ユーザーに紐づけ、URLに持たせましょう。

パワーユーザー監査

どんなプロダクトでも、この7つの質問に通してみてください。2つ以上落とせば、四半期末までにエキスパートは他社のプロダクトにいます。

1. すべての主要アクションにキーボードショートカットがあるか? 上位20のアクションを挙げて確認します。3つより多くがマウスを必要とするなら、キーボードレイヤーは未完成です。
2. 検索して実行するCmd-Kパレットがあるか? 検索バーではありません。コマンドを実行し、引数を受け付け、ショートカットのヒントを出すパレットです。
3. ショートカットは文脈の中で発見できるか? ツールチップ、パレットのヒント、メニューのラベル。ユーザーはドキュメントを読むのではなく、アクションをしながらショートカットを学ぶべきです。
4. 複数選択はキーボードで動き、明確な取り消しがあるか? shift-クリック、キーストロークのアクション、1キーの取り消し。どれか1つ欠ければ、連鎖は途切れます。
5. 保存ビューはURLでアドレス指定でき、永続的か? URLをコピーし、別のブラウザに貼り付けて、ログインします。ビューが読み込まれないなら、保存状態は芝居です。
6. パワーの面はどこからでも1キーストローク先か? コンソール、APIの面、拡張ライブラリ。エキスパートが移動しないと届かないなら、それらは機能ページであって、パワーの面ではありません。
7. プロダクトはキーボードを第一級市民として扱っているか? ブラウザと衝突するショートカットなし。課金壁の裏のショートカットなし。マウス専用の一括操作なし。

7つすべてに合格したプロダクトは、デフォルトでエキスパートをつなぎとめます。3つ以上落としたプロダクトは、Linear、Raycast、あるいは2つ目のプロダクトを意図的に出荷した競合に彼らを奪われます。同じ規律のレイアウト面はアンチダッシュボードで、エキスパートが密度をどう読むかはビジュアルヒエラルキーの記事で扱っています。

プロダクトのどこに当てはまるか

パワーユーザーUXは、初回体験UXの対になるものです。プロダクトを一度も見たことがないユーザーは、オンボーディングなしのオンボーディングの解説が扱います。この記事が扱うのは、900回見たユーザーです。意図的な摩擦のデザインの考え方は、ここでは逆に働きます。新規ユーザーには、適切な瞬間の摩擦がプロダクトを教えます。エキスパートにとっては、不要な摩擦はすべて税金です。ランディングページのデザイン原則とWebデザインの原則の解説は、同じ規律のマーケティングページ版とプロダクト全体版を扱っています。

隠れたプロダクトを、意図して作る

見えるプロダクトは、ローンチ記事とデモ動画を得ます。隠れたプロダクトは、契約更新と口コミを得ます。Linear、Raycast、Superhuman、Notion、Cron、Figma、Gmail、Vercel、Slack、GitHub、Stripe、そしてCursorには、共通点が1つあります。すでに知っているユーザーのために、本物の2つ目のプロダクトを出荷したことです。

多くのチームは最初のプロダクトを出荷し、2つ目は偶然に任せます。エキスパートを失うのは、その選択です。キーボードレイヤーを選ぶ。パレットを選ぶ。保存ビューの仕組みを選ぶ。一括操作を選ぶ。パワーの面を選ぶ。複利の効果が、エキスパートが我慢するプロダクトと、エキスパートが布教するプロダクトの差になります。

FAQ

パワーユーザーUXとは?

パワーユーザーUXは、すでにプロダクトを知っているユーザーに向けたデザインのレイヤーです。コマンドパレット、キーボードレイヤー、保存ビューとフィルター、一括操作、パワー専用の面が含まれます。新規ユーザーには必要ありません。エキスパートは、その中で暮らしています。

すべてのプロダクトにCmd-Kコマンドパレットは必要?

生産性系のプロダクトなら、ほぼすべてに必要です。パレットは検索と実行を統合した面になり、エキスパートにあらゆるアクションを開く1つのキー操作を与えます。Linear、Raycast、Notion、Vercel、GitHub、Slackはすべて出荷しています。主要アクションが1つしかないコンシューマー向けプロダクトは省いても構いません。ほとんどのB2Bとプロシューマー向けツールは、省けません。

ツアーなしでキーボードショートカットを教えるには?

ショートカットを、毎回アクションの横に表示します。ツールチップのヒント、パレットのヒント、メニューのラベル。Superhumanは、ユーザーが呼び出せる第一級の画面としてチートシートを出荷しています。Linearは、パレットとメニューのすべてでショートカットを表示します。ユーザーは、作業をしながらキーボードを覚えます。

2つ目のプロダクトを出荷しよう

キーボードレイヤー、コマンドパレット、保存状態の仕組みを、最後の後始末ではなくプロダクトの一部としてデザインするチームが欲しいなら、Brainyに依頼してください。私たちは隠れたプロダクトを意図して作ります。だからエキスパートは明日あなたのツールを開き、昨日より速くなったと感じるのです。