stop-describing-ui

UIの説明をやめる

インターフェースは、ユーザーにできることを示します。インターフェース自体の説明はしません。文はどれも、ユーザーが操作する前に読まなければならないものです。読まないとユーザーが実際に間違える場合に限って、文を残してください。

UIを書くときは、以下のルールを適用してください。UIをレビューするときは、すべての文字列を確認し、各ルールを適用して、修正前と修正後を提示してください。

ルール

1. 機能を説明しない

操作名を付けます。見出し、コントロール、ラベルがあれば、その画面の用途はすでに伝わります。

修正前

# Projects
## No projects yet.
### Choose a GitHub repository and we'll deploy on every push.
+ New

修正後

# Projects
+ Connect repository

2. 具体的な動詞を使う

実際に何が起きるのかを表す動詞を選び、その動作の対象も示します。より具体的な動詞がある場合は、「新規作成」「作成」「管理」「設定」「構成」「移動」「OK」などの汎用的な動詞を避けます。上の例では、「新規作成」を「リポジトリに接続」に変更しています。

3. 最も重要な結果だけを残す

操作によって複数の結果が生じる場合は、最も重要なものだけを記載し、それ以外は省きます。操作から当然に導かれる結果は、暗黙に伝わります。AI の自動返信で予約を受け付ける予約サービスでは、自動返信をオフにすれば予約も停止することは明らかです。

修正前

Turning this off stops AI auto-replies and web reservations. Customer messages are saved only to the conversation log. You can turn it back on anytime from "Replies off" in the header.

修正後

Temporarily turns off AI auto-replies.

データの削除、料金の請求、顧客への通知など、取り消せない操作や破壊的な操作の結果は重要なので、必ず残します。

4. バックエンドの動作を説明しない

データの保存場所、ログに記録される内容、同期される内容、バックグラウンドで実行される処理は、ユーザーが気にすることではありません。上の例では、「顧客のメッセージは会話ログにのみ保存されます」を削除します。

5. 同じコントロールで元に戻せるなら、その方法を説明しない

オン／オフを切り替えるトグルなら、オフにしたものをオンに戻すこともできます。元に戻すのに別のコントロールや場所が必要な場合に限り、元に戻す方法を説明してください。

6. ページにすでに示されていることを説明しない

ページタイトル、ナビゲーション、セクションの構成が意味を伝えています。「オプション」ページを見ているユーザーは、そこにオプションが表示されていることをすでに理解しています。

修正前

# Other options
### Options that become available with a contract. They cannot be toggled on or off.

修正後

# Other

7. 存在しないことを述べない

画面に表示されているのに、「まだ項目がありません」「切り替えられません」「この機能は利用できません」と書かないでください。明確な操作方法が示された空のリストなら、「ここにはまだ何もありません」と伝わります。トグルのない行なら、「切り替えられません」と伝わります。

例外は、ユーザーが試して失敗する可能性のある制限です。たとえば、ユーザーのロールでは実行できない操作などです。ルール 9 のように、アイコンを付けた短い一文で残してください。

8. 有効にする方法は画面に表示し、文章で説明しない

サブスクリプションへの登録、アップグレード、接続、設定のオンによって何かが利用可能になるなら、それを実行するボタンやトグルを画面に表示してください。どこへ行くか、何をするかをユーザーに指示する文は書かないでください。

修正前

Sign up for the Pro plan to use this option.

修正後

[Upgrade to Pro]

9. テキストだけに頼らない

文章は短い行に分け、各行の先頭にアイコンを付けます。余白とグループ分けを使って構成を示します。

区切り、矢印、箇条書き、強調として、->、>、|、✔️、!、→、または : を絶対に使わないでください。代わりにアイコンや余白を使います。

修正前

Searches across all stores and shows the results. Stores you don't belong to are shown as Operator, and every action records who did what in which store. You can't change applications, payment methods, or plans, or send messages to customers (replies, approving or declining tentative reservations).

修正後

(icon) Every action is recorded
(icon) You can't change applications, payment methods, or plans, or send messages to customers

ここでは、「すべてのストアを検索して結果を表示します」はルール 1 により削除します。「Operator として表示」は、UIですでにラベルが付いているためルール 6 により削除します。レコード形式の詳細は、ルール 4 により削除します。

チェックリスト

各文字列について、次の順に確認します。

1. 機能の内容を説明していますか？削除するか、具体的な操作を示すラベルに置き換えます。
2. 動詞が一般的すぎませんか？実際の操作と対象を明示する動詞に置き換えます。
3. 複数の影響を列挙していますか？最も重要なものだけを残します。
4. 保存、ログ記録、同期など、内部処理に触れていますか？削除します。
5. 同じコントロールを使った取り消し方法を説明していますか？削除します。
6. ページタイトルやナビゲーションですでに示されていますか？削除します。
7. 何かがない、または利用できないと述べていますか？ユーザーがそのまま試して失敗する場合を除き、削除します。
8. 何かを有効にする方法を案内していますか？ボタンまたはトグルに置き換えます。
9. 段落になっているか、区切りに記号を使っていますか？アイコン付きの行に分け、余白を入れます。

チェックリストの適用後に何も残らない場合は、何も記載しません。中身のない補助テキスト欄のほうが、埋め草の文章より適切です。