🖊️

UIの文言 ボタンテキスト編

2024/09/24に公開

何についての話か

すでに散々書かれた内容だが、アプリケーションの UI を組む上で、ボタンの文言は「名詞(体言止め)」を使うか、「動詞(〇〇する)」を用いるかの話。

(例)

  • 「保存」or「保存する」
  • 「投稿を削除」or「投稿を削除する」

なんとなく手癖で「名詞(体言止め)」を使っていたが、しっかりルールを決めたいと思ったので調べつつ考えをまとめた。

noun-or-verb

前提

  • この記事でいう動詞とは、「〇〇する」で表せるもののことを指す
    • 「戻る」「進む」など「〇〇する」の形でないものの扱いについては、また別の機会にまとめる

結論

  • 基本的には名詞
  • 動詞が良い場合もある
    • そのアクションがプロダクトにとって大きな意味がある場合
    • そのアクションを自分ごととして捉えてほしい場合

名詞の特徴

ユーザーの認知負荷を軽減できる

当たり前だが、文字数を減らせるため、ユーザーの認知負荷を軽減できる。

ボタンを小さくできる

これはデザイナー目線で嬉しいことだが、UI の制約上文言は少ない方が UI は組みやすい。

動詞の特徴

主体的な行動を促せる

これは半分都市伝説みたいな話だが、動詞でボタンテキストを書いた方が主体的な行動を促せる気がする。
(調べてもデータは出てこなかったが、そう考えてるデザイナーの方は多かった。)

ちなみに WEB 広告業界で働く友人に聞いてみると、CTA ボタンの文言は「動詞」を使ってるようだった。

どっちが良いのか

基本的には名詞(体言止め)がいいと考えている。

  • 認知負荷が小さい
  • 情報は少ない方が、ユーザーが目当ての行動にたどりつきやすい
  • UI を組む上での自由度も高い

ただ、例外はある。

  • そのアクションがプロダクトにとって大きな意味がある場合

    • 例えば twitter などは、ユーザーが作成するコンテンツがサービス価値になっている
      • できるだけ「コンテンツの作成」というアクションを促進した方が良いので、動詞を使った方が良い
  • そのアクションを自分ごととして捉えてほしい場合

    • コンテンツの削除など、誤って行った場合大きなリスクのあるアクションは動詞にして自分ごととして捉えてもらった方が良い

大事なのは、「このパターンの場合はこちらを使う」という文言の一貫性。

  • UI にしろボタンテキストにしろ、一貫性を持たせることで、ユーザーにとってアプリケーションの動きが予測しやすく、使いやすいものになると思う

参考になった記事、サイトなど

https://note.com/sksk/n/n9715e4c26c0d
https://tkhs0604.hatenablog.com/entry/wording-and-ooui
https://smarthr.design/products/contents/app-writing/#h2-5
https://note.com/miyaccchi/n/nbc92a679c482

さいごに

いずれライティングのガイドライン全体を記事にしたいと思っています。
違う考えの方もいると思うので、みなさんのボタンテキストについての考え方を教えてください。

mutex Official Tech Blog

Discussion