Sジブンノート

マイクロコピー、マイクロインタラクション、そしてリンク

こんにちは、@silverbirder です。最近、湖県に移住してWebフロントエンドのお仕事をしています。 お仕事をしていると、ユーザー体験を良くするためには、大きな改善をせずとも小さな改善だけでも十分な効果があると思い始めました。 本記事では、その小さな改善となる、3つのことについて書きたいと思います。

3つのこと

その小さな改善は、Webの世界に必ず存在する、以下の3つの要素を丁寧に扱うことです。

  • マイクロコピー
    • 小さな文章
  • マイクロインタラクション
    • 小さな操作
  • リンク
    • 導線・動線

あるライブラリやフレームワークの話ではありません。Webの基本的な要素です。 それぞれについて、私の考えていることをまとめます。

マイクロコピー

Web には、必ずと言っていいほどテキストが表示されています。 例えば、以下のテキストがあります。

  • ボタンのラベル
  • 入力フォームのプレースホルダー
  • リンク
  • エラーメッセージ
  • 説明文

考え出すと、いくらでも列挙できるかと思います。それぐらい、Web にはテキストがほぼ必ず存在します。 このような、小さな文章（コピー）をマイクロコピーと呼びます。

このマイクロコピーは疎かにしてはいけません。 JavaScriptでプログラムを書くのと同じぐらい、文章を書くことも大事です。 なぜ大事かというと、1つの文章次第でユーザー体験が大きく変わるからです。文章の書き方一つで、購買率などの指標にも大きく影響します。 いくつか、例を書いていました。多くの場合、Bの方が良いかと思います。

  • 購入ボタンのラベル名
    • A: 購入
    • B: 注文を確定する
  • 返品手続きの案内
    • A: 返品理由を入力してください
    • B: 返品理由を教えていただければ、今後の改善に活かします
  • 画像のアップロード
    • A: ファイルを選択
    • B: 画像は 5MB 以内。jpg / png に対応

上記について、何かの機能を作るのではなく、文章を変えているだけ なんです。 文章を書くという小さなコストで、ユーザー体験が大きく変わる、非常に費用対効果の高い施策ですよね。

ただ、文章を書くにもコストがかかります。 文章を書くテクニック（コピーライティング）は書籍で様々紹介されているかと思いますが、私は恥ずかしながら知りません。 知らない私でも、いつも以下について意識するように心掛けています。

  • 文章を書くことに躊躇わない
    • 短くてストレートに伝わる文章を書ければよいですが、最初からできないです。
    • 伝えたい文章をストレートに書いてみて、そこから削るようにしています。
    • デザイン上のスペースが限られている場合や、文章ばかりで窮屈に感じるときは、工夫しましょう。
  • ユーザー視点と言うが、具体を意識する
    • どういう動線で当該ページに辿り着いたのか、実際に操作したり画面画像を並べてみる。
    • アクセス経路やデータは、できる限り本物にする。
    • できる限り、シンプルな具体に落とし込む。
  • メタファーに頼りすぎない
    • アイコンだけで完結せず、アイコンは補助的に文章をメインに考える。
    • アイコンだけであっても、ツールチップなどで補足する。
  • 文章の読み手だけでなく、誰が書いているのか意識する
    • システムが機械的なトーンで書いているのか、人が寄り添って書いているのか。
    • その結果、トーンや言い回しが揃う。

他には、専門用語を使わない、1文を簡潔に書く、ポジティブな表現で書くなどもありますが、粗末なことです。 まずは、文章を書くことに躊躇わない ことが大事と考えています。

文章を書かずにアイコンやアニメーション、インタラクションの振る舞いだけでメッセージを伝えようとする スタイリッシュなUIを見かける機会が増えました。コンセプトやサービス形態によってはそれが良い場面も多いかと思います。 しかし、Web というドキュメントを読んでもらうプラットフォームでは、文章で伝えることが最も確実です。

プログラムを書くより、文章を書こう！

マイクロインタラクション

  • チェックボックスをクリックしたら、チェックマークが入ります。
  • トグルボタンをクリックしたら、ON/OFFが切り替わります。

そういう、何か操作したら（トリガーを発火したら）何かフィードバックを得る、これがインタラクションと呼ばれます。 インタラクションは、ユーザーとシステムのやり取り、相互作用のことです。 そのインタラクションの最小単位を、マイクロインタラクションと呼びます。

Webフロントエンドのお仕事をしていると、マイクロインタラクションを作る機会が多いです。 一例だと、『何かをクリックしたら、（APIが呼ばれてデータが保存されて）メッセージが表示される』などです。

マイクロインタラクションを作る際、フィードバックを疎かにしてはいけません。 例えば、以下のようにフィードバックを疎かにすると、ユーザーは不安になります。

  • いいねボタンをクリックしても、最初の1秒間 何も反応しない
    • 即座にいいねの数をカウントアップしてほしい
  • フォームの保存ボタンをクリックしても、保存できないときがある
    • 保存できなかった原因を表示してほしい
  • ローディングスピナーが3秒以上ずっと、読み込み中のまま
    • 進捗状況を表示してほしい
  • リストの並び替え時、どこが並び替わったか分からない
    • 並び替えたアイテムの位置を示してほしい

マイクロインタラクションの悪い例の一つは『iPhoneをマナーモードにしても、アラームが鳴ること』です。 音を鳴らさないマナーモードにしたのに、アラームでは音が鳴るのです。

そもそも、マイクロインタラクションとは、どのような構成をしているのでしょうか。 それは、以下の構成で表現されます。

  • トリガー
    • 動きを始めるきっかけ。
    • 例: クリック。
  • 条件
    • 実行するための前提。
    • 例: ログイン中。
  • フィードバック
    • 操作への返答。
    • 例: 送信中…表示。
  • ループ
    • 繰り返し続くか。
    • 例: アラーム時間まで繰り返す。

iPhoneの例でいうと、2番の条件にアラームは除外されるのです。それがユーザーにとって不透明なのです。

私は、些細なことでも良いので、フィードバックを必ず返す ことを意識しています。

  • ボタンをクリックした瞬間にラベルが「送信中…」へ変わる
  • 二重送信を防ぐためボタンが一瞬無効化される
  • フォーム送信後、エラーがある箇所へ自動スクロール
  • 入力完了したら✓アイコンが表示される
  • コピー完了時に「コピーしました」と小さくトースト表示する
  • 入力中の文字数カウントが増える
  • ホバーした行の背景色が変わる
  • リストが空なら「まだデータがありません」と表示
  • 長文入力で自動的に高さが広がる

この細部のマイクロインタラクションを丁寧に作り込むことで、他と差別化できるポイントになると思います。 マイクロインタラクションを丁寧にすることで 『神は細部に宿る』 のです。

リンク

Web は、ハイパーテキストを介して様々なページが繋がっています。 リンクは、Web の基本的な要素です。

Webフロントエンドのお仕事では、導線をどのように設計するか考える機会が多いです。 どのように回遊してもらうか、どのように離脱を防ぐか、意図せず行き止まりにならないか などを考えます。

リンクは、ページとページをつなぐ架け橋です。 もしリンクが以下のような場合、ユーザーは道に迷うかもしれません。

  • 目的地へ直線的に行けるリンクがなく、経由地を何度も通らされる
  • リンクが一切なく、行き場を失って離脱してしまう
    • 逆に、リンク数が多すぎてどれを選んだらよいか分からない
  • リンク先の内容とリンクテキストが一致しない
  • 退会などの重要ページへのリンクが、隠されている
  • 前に進むリンクはあるけど、戻るリンクはない

道の迷わないためにも、以下のことを心がけたいですね。

  • リンクは、標準的なスタイルにする
    • アンダーライン、色
    • テキストは、コンテンツ内容を含める
    • 異なるドメインの場合は、新しいタブで開く。
  • ナビゲーションを充実させる
    • グローバルヘッダー・フッターの主要ページへのリンク
    • サイドバーに補足・関連情報へのリンク
    • ページの階層構造を示す パンくず
    • コンテンツの関連リンク・おすすめリンク
    • エラー画面での問い合わせやFAQリンク、トップページリンク
    • データが空のときのアクションリンク

終わりに

短くまとめると、マイクロコピー、マイクロインタラクション、リンクの3点は、小さいけれど重要です。 文章、操作、リンクを少し変えるだけで、ユーザー体験は確実に良くなります。

ここまで読んでいただき、ありがとうございました。