縁の下のUIデザイン―少しの工夫で大きな改善!

第7回 「いいね!」の効果的な使い方―ボタン設計,複数リアクション,ブックマークとの違い

この記事を読むのに必要な時間:およそ 2 分

SNSSocial Networking Serviceなどのコミュニケーションサービスを利用している人にとって,⁠いいね!」などフィードバックをする行為は最も身近なアクションであり,頻繁に接するUIUser Interfaceかもしれません。

Facebookの登場以降「いいね!」はスタンダードになり,多くのサービスに同様の機能が実装されています。しかし「いいね!」の役割や目的をはっきりと理解しないと,ユーザーにしてほしいことと機能の間にギャップが生じることがあります。今回はアイコンをタップすることなどによりコンテンツに対して簡単にフィードバックできる,ライトフィードバックのUIについて考えます。

ライトフィードバックの目的と設計

まず,ライトフィードバックの目的は,⁠簡単」にコンテンツにフィードバックを返せるようにすることです。感想をコメントで書く場合は内容などをあらかじめ考えてしまいますが,考えることなくアクションできる手軽さがあるため,より多くのフィードバックを集めることができます。また,そのおかげでコメントも内容の濃いものが集まりやすくなるため,アクションが明確に差別化できます。

冒頭に紹介したFacebook,写真共有SNSのInstagramなど,⁠いいね!」ボタンを押すと,⁠いいね!」した数,誰がアクションしたかわかる最もシンプルな設計です。

しかし,近年のサービスは,ライトフィードバックをした人の感情を表現したり,コンテンツ作者に自分の存在をアピールできるといった設計の工夫も広がっています。

直感的に簡単に操作できるボタン設計

「いいね!」の機能の売りは,コンテンツを見たユーザーが深く考えることなく直感的にフィードバックを送れることです。そのため,⁠いいね!」はコンテンツの近くに配置する必要があります。⁠最初隠れていて気付きにくい」⁠小さくてなかなかタップできない」といったことがないように,アクションしやすい設計にすることが基本です。

「いいね!」の言い換えについて

「いいね!」がよく使われていることから,あえて「Good!」⁠便利!」⁠よさそう!」など異なるワーディングで個性を出そうとしているケースに出会ったことが何度かあります。しかし,その変更自体が有効に感じたことはありません。

別の言葉にするかを考えるよりも,スタンダードな「いいね!」で実装しユーザーの反応を見てから個性を出すことを考えても遅くはないと筆者は考えます。

コンテキストを読んだライトフィードバック

図1のGitHubでは,コメントに対して「Pick your reaction」と6つの絵文字からフィードバックするアイコンを選ぶことができます。図2のSlackでは,文章の書き主と受け手の間に多様な絵文字を使ったコミュニケーションが可能で,自分で新しい絵文字を追加できるほどです。

図1 GitHubのPC Web

図1 GitHubのPC Web

図2 SlackのiPhoneアプリ

図2 SlackのiPhoneアプリ

このように複数の軸のフィードバックができるサービスが登場したのには,2つの背景があると考えます。

1つ目は,⁠いいね!」という1軸では不十分になった点です。たとえば,⁠風邪を引いた」⁠何か身内に不幸があった」ことを連絡目的でSNSに投稿するユーザーも少なくありません。この場合,⁠いいね!」はコンテキストには合わないため,合ったリアクションを返してあげる必要があります。逆に写真投稿に対するリアクションなどコンテキストを考える必要があまりないものに対しては,1軸で十分であることも多いはずです。

2つ目は,賑やかさの演出という観点です。図2のSlackはリリースを社内に報告した場合の反応の事例ですが,1軸のアクションよりも,複数の絵文字が画面上に可視化されることでその場の盛り上がりを表現できています。

著者プロフィール

池田拓司(いけだたくじ)

デザイナー。多摩美術大学を卒業後,ニフティ株式会社,株式会社はてなを経て,2012年にクックパッド株式会社に入社。2013年デザイン部長,2014年ユーザーファースト推進部長・執行役。Sassを使ったUIフレームワークの構築,Webアプリケーションなどサービス全体の設計,ユーザーのほうを向いたデザインやサービス開発の組織づくりにも努める。2017年4月に独立し,Design & Life inc.を設立。インターネットサービスをはじめとするさまざまなデザイン業,およびサービス開発などに取り組んでいる。

Design & Life inc.:http://designandlife.co.jp/

コメント

コメントの記入