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

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

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

ネガティブなライトフィードバック

図3のYouTubeのように,⁠いいね!」ではなく「よくない!」を表すケースも存在します。ネガティブなフィードバックはマイナスの印象が目立ってしまうため導入には十分配慮する必要があります。このフィードバックが付いていることで,不適切な投稿をしづらい環境を作ったり,仮にそういうものが投稿されたとしてもそれが目に付きにくい状態を作れるといったメリットもあります。

図3 YouTubeのiPhoneアプリ

図3 YouTubeのiPhoneアプリ

送り手の感情の強弱を付ける

図4の植物写真共有サービスのGreenSnapでは,コンテンツに対して複数回ハートをタップできます。最大5回タップでき,好きな度合いを表現できるのです。同様に,はてなが提供するはてなスター図5はスターの色と数が指定でき,ユーザーのアイコンとともに可視化されます。色ごとに稀少性が変わるため,貴重な色のスターを使ったユーザーは目立つことができ,加えて作者に対してありがたさを強く表現することもできるのです。

図4 GreenSnapのiPhoneアプリ

図4 GreenSnapのiPhoneアプリ

図5 はてなブログに付いたはてなスター

図5 はてなブログに付いたはてなスター

コンテンツ作者へのフィードバックにも段階があり,その先にはコンテンツに対してお金を払って買うというアクションがつながっているとも考えられます。自分が作るべき機能,ユーザーに接してもらうUIがどのようなものか内容に合わせて考えなければいけません。

保存とライトフィードバックの違いを明確にする

ライトフィードバックは,しばしば「お気に入り」⁠クリップ」といった「保存」のための機能と混同されがちです。基本的にライトフィードバックは相手に対して付けるため,あとから自分のために振り返る目的はありません。そのため,ブックマーク的な機能と混同しないように注意が必要です。

図6のTwitterには「いいね」というライトフィードバックのアクションがありますが,これを保存としての役割として使っていたユーザーも少なくないと考えます。しかし,⁠いいね」は誰がアクションをしたかが第三者に見えてしまいます。そのため保存やブックマークの機能は非公開を望むユーザーの声が多いことが考えられ,新しく「ブックマーク」という機能が2018年2月に実装されました。

図6 Twitterの「いいね」

図6 Twitterの「いいね」

実際に図7 のInstagram でも,⁠いいね!」「保存」は異なった機能として提供されます。

図7 Instagramの「いいね!」と保存(左側のハートのアイコンが「いいね!」⁠右側のしおりのアイコンが保存)

図7  nstagramの「いいね!」と保存(左側のハートのアイコンが「いいね!」,右側のしおりのアイコンが保存)

コンテンツ作者と読者の良い循環を作る

コンテンツ作者にとって,読み手のフィードバックがあるからこそ投稿のモチベーションが高まるのです。投稿したときにユーザーの反応を気にするようになり,良い反応があるとまた投稿したくなります。そして投稿と反応のループが起こり,それがサービスの活性化につながるのです。⁠いいね!」というそれだけに目を向けるのではなく,この循環を作るために何が必要なのかをちゃんと考えることが大切なのです。

「いいね!」から始まったライトフィードバックも,感情を表現するために複数の種類からわかりやすく選択できたり,保存の機能と混同しないよう表現したり,さまざまな配慮をしてデザインしなければいけない奥の深いUIだと考えています。まずはシンプルに必要な機能を付けて,アクションするユーザーとそれを受け取るコンテンツ作者の反応を見ながら広がりを考えていくのがお勧めです。

WEB+DB PRESS

本誌最新号をチェック!
WEB+DB PRESS Vol.107

2018年10月24日発売
B5判/160ページ
定価(本体1,480円+税)
ISBN978-4-297-10172-5

  • 特集1
    [Dockerもサポート!]実践CircleCI
    ワークフローで複雑なCI/CDを自動化
  • 特集2
    iOS 12最新活用
    強化された機械学習とAR,Swift 4.2
  • 特集3
    速攻改善 UIデザイン
    銀の弾丸! オブジェクトベース設計

著者プロフィール

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

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

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

コメント

コメントの記入