ケーススタディ:出会い系アプリbumbleのUXデザイン

Sean McGowan

SeanはCodal社の技術ライターおよびリサーチャーです。UXデザインからIoTまで、様々な話題のブログを投稿しています。

この記事はUsabilityGeekからの翻訳転載です。配信元または著者の許可を得て配信しています。

UX Case Study: Bumble (2017-06-07)

UXデザインのさまざまな話題に関して、私はこれまでかなりの量の記事を執筆してきました。その内容は、モバイルアプリのポップアップのようなニッチなテーマからデザインそのもののような包括的なものにまで及びます。

しかし1つの議題を掘り下げるよりは、全体のUXを研究するほうが効果的なこともあります。たとえば、デザインテクニックを組み合わせることでアプリケーション全体としてどのように機能するかを検証することは役に立つでしょう。

UXはデザインの実践やテクニックの単なるチェックリストではありません。ただ部品を足していったもの以上になるように、調和して機能させなければなりません。

そして、UXを俯瞰的な視点から調査するにあたり、今回はあるモバイルアプリにおけるUXのケーススタディを詳しく見ていきたいと思います。このアプリを、UXのレンズを通して批判的に検証することで吟味していきましょう。そして、アプリの特徴を確認して、弱点を発見したいと思います。

この記事で説明するUXケーススタディは、特定のアプリケーションを対象としています。しかし、どんなアプリやWebサイト、インターフェイスであっても、このケーススタディを応用することができるでしょう。

このケーススタディに際して、私は今まで使ったことのないアプリケーションを選びました。その理由は、バイアスを回避するためです。また、優秀なUXにとってとても重要な部分である、プラットフォームにおけるオンボーディングのプロセスを自分自身の体験を通して検証するためです。

ソース:bumble

この2つの基準に合ったのが、bumbleという出会い系アプリです。世界的にも有名な出会い系アプリTinderの派生製品で、Tinderでは満足しなかった登録者たちのために作られました。bumbleのプラットフォームもTinderと同様に、スワイプするとマッチングするという、1つの動作だけで操作できるシンプルなものです。また、女性だけが最初のメッセージを送信することができます。

この仕組みはうまくいきました。700万人以上のユーザー数を誇るbumbleは、今やもっとも人気の出会い系アプリの1つとなっています。しかし、bumbleはこのユーザー全員のサポートをできているでしょうか? アプリはうまく機能しているでしょうか? 改善点はどこでしょうか? そしてbumbleの成功と失敗から何が学べるでしょうか? 

私は自分のiOSデバイスにbumbleの最新バージョンをダウンロードして使ってみました。

オンボーディング

アプリを開くと、簡潔でわかりやすい「Facebookでサインインする」というCTA(Call to Action=行動喚起)が組み込まれたログイン画面が表示されます。このCTAには、bumbleでの投稿がFacebookには表示されないことをユーザーに保証するメッセージが添えられています。

この時点で、bumbleはモバイルUXデザイン市場における一般的な常識から外れています。誰もがFacebookアカウントを持っているわけではないため、Googleアカウントやメールアドレスとパスワードでサインアップできるようにするなど複数の方法を用意するべきなのではないでしょうか?

ですが、このbumble特有のUXの選択は間違いではないかもしれません。なぜなら、この選択はユーザーに対してより精度の高いマッチングを提供するというbumbleの目的の1つを優先させるためだからです。ユーザー登録をFacebookメンバーだけに限定することで、荒らしやボットなどの低品質なマッチングを減らすことができています。

bumbleのサインアップ画面

全体的にbumbleのログイン画面はすっきりとしてわかりやすいですが、少しずる賢い部分もあります。ほとんどのUXデザイナーは、チュートリアルが必要なアプリケーションは、上手に設計されていないと思うでしょう。bumbleのホーム画面では、背景に日常生活の中で出会い系アプリを使う女性のチュートリアルビデオをこっそりと忍び込ませています。

この女性がスワイプやスクロールを行い、アプリを通じてチャットをする様子を見せることで、私のような新しいユーザーにアプリがどう機能するかを潜在的に教えています。この言葉を使わないシミュレーションタイプのチュートリアルのテクニックはbumbleに特有なものではありません、bumbleはこのテクニックを上手く駆使しています。

ユーザー登録をして現在地へのアクセスを許可したら、次の画面へ移動します。ここではこのアプリの4つのシンプルなステップが要約されています。この画面はとてもわかりやすく、UXに関して特別に説明するほど複雑なものはありませんので、この部分の分析は飛ばそうと思います。

メイン画面

bumbleの中心となるフィードを見る前に、bumble Boostに関する宣伝用ポップアップに遮られました。アプリのプレミアムコンテンツサービスの案内です。これは理想的なUXではありません。ただ単にポップアップが表示されたから良くないというのではなく、むしろ問題はポップアップの表示されるタイミングです。私にとってはあまり良いタイミングではありませんでした。

bumble Boostのポップアップ

私は新規登録ユーザーなので、通常バージョンを使う前に、プレミアムコンテンツに関心を持つでしょうか? ポップアップでは「無制限の利用」を提案していますが、bumble初心者の私にとっては、何が無制限なのかよくわかりません。

ポップアップを消してから、bumbleのインターフェイスを見ることができました。ほかの出会い系アプリと同様に、ユーザーにもっとも焦点が当てられています。bumbleのメイン画面でも、全体のおよそ90%がマッチング対象となるユーザーの写真です。そして残りの5%は名前や簡単なプロフィールに割り当てられています。

bumbleのフィード。メインのUI画面(プライバシー保護のため加工しています)

画面右上のドットのサインを縦にスクロールすると、ユーザーの写真をさらに見ることができます。また一番下の位置のドットは金色になっており、相手のより詳しいプロフィールを見ることができます。

スワイプによる操作の構造は、Tinderで人気のあった、左方向にスワイプすると好きではない、右方向は好きというものが使われています。これは彼らが公に言っている訳ではありませんが、bumbleのUXデザイナーはこのデザインだとユーザーにとって直感的であると考えたのでしょう。スワイプすると、好きの場合はbumbleのロゴが、好きではないの場合は「×」というように、アクション通りのアニメーションが写真の上に表示されて、確認をするポップアップが出てきます。

メイン画面の最後の要素は2つのボタンで構成されており、それぞれ画面上側の隅に表示されています。左側は設定画面を表す歯車のマークで、右側にはbumbleのロゴが少し控えめに表示されています。では、さらに進んでみましょう。

マッチング

メイン画面の右上にあるbumbleのロゴマークをタップすると、マッチング相手とのページへ移動します。ここでは相手との関係や会話を管理できます。この画面を初めてみたとき、2つの案内用のポップアップが表示されました。

両方とも情報を提供するものですが、1つ目はメッセージが途中で切れて、完全に表示されていません。メッセージをタップやスクロール、スワイプしたりしましたが、テキストをさらに読み進めることができませんでした。ポップアップを消したあと、比較的直感でわかるようなコンテンツ管理画面が出てきます。

bumbleはこの画面をデザインするのに、2つの異なるプラットフォームの要素を組み合わせています。1つ目のMatch Queueの機能(マッチングしたユーザーのリスト)には、ほぼTinderと同じものを使用しています。これはあまり優秀なシステムではありませんが、bumbleにも存在するのには理由があります。bumbleでは、マッチをタップすると要約されたプロフィールが表示され、ユーザーが会話を始める前にマッチしたという記憶をすぐによみがえらせることができるという新しい工夫が加わっています。

2つ目のConversations構造は、iOSで使用されているスタンダードなメッセージング機能と同等のものです。これも競合の出会い系アプリと同様のものですが、bumbleのソート機能はタッチ操作がしやすく直感的にわかりやすくなっています。

画面右上に、わかりやすくラベル付けされた検索機能とクエスチョンマークのシンボルがあるのがわかります。タップすると、次のようなウォールが表示されます。

関係性のタイプを示すためのbumbleのカラーシステムに欠陥があると言っているわけではありません。しかし、このガイドには間違いなく問題があります。これはテキストウォールの本質的なもので、圧倒的な量の情報をウォールの中にぎゅうぎゅう詰めにしたような、格好悪い印象を与えます。

さらに問題なのは、スクロールダウンをするとbumbleのプレミアム機能が表示されることです。これは完全に無関係のものです。もしこのような迷惑なポップアップ出なかったら、アプリのアップグレードパッケージの場所を見つけられなかったでしょう。結果的に、このセクションに隠れていたのです。

フィードに戻って、左上のギアアイコンをタップし、プロフィールへアクセスしてアプリの設定を行います。

プロフィール/設定

プロフィール画面に来ました。ほかのbumbleユーザーから自分のプロフィールがどのように見えているかが表示されています。画面上部の水平なボタンでプロフィールと設定の切り替えを行うことができます。まず最初に気づいたのが、bumbleはFacebookのプロフィール画像から自動で写真を選んでいることです。

これが親切なデザイン選択かどうかの判断はわかれるでしょう。私はFacebookをめったに更新しないので、何年も前の写真もあります。そのため、出会い系のプロフィールとしては絶対に使いたくないものもあります。一方で、お気に入りのセルフショットを何枚も探して、1枚ずつアプリにアップロードするような手間が省けて良いという人もいるでしょう。

プロフィール設定の切り替えに加えて、小さな「ペンと紙」のアイコンもあります。通常このアイコンは編集と修正を表すもので、ここでタップするとプロフィールに修正を加える画面に移動します。

全体的にこの画面のUXは非常に良くできていますが、改善の余地もいくつかあります。さらに、「ヒント」が表示され写真の並び替えの方法を教えてくれますが、テキストが途中で切れているため残りの文章を読むことができません。

「About Me」のデフォルト文も少し重複しています。このボックスが何のためのものかは、ラベルの名前からすでに明らかです。大抵の場合、ユーザーは、自己紹介に何を書くべきか迷うことが多いでしょう。そのため、bumbleはデフォルト文をより役に立つものにするチャンスを失っていると思います。「お気に入りの映画は何ですか?」や「最後に行ったコンサートは何ですか?」などのデフォルト文のほうがきっと良いでしょう。

プロフィールが埋まりましたので、画面上の切り替えをタップして設定のインターフェイスに移動します。順当なデザインの画面で、bumbleは普遍的なデザインにすることにこだわっているようです。

私が唯一不満を感じたのものがスライダーです。年齢や距離の好みを正確な位置に調整するのが少し大変でした。

最終的な判断

メッセージのやりとりなど、まだ分析していない機能もいくつかありますが、bumbleを分析するのには十分な範囲を見てきました。アプリのUXのほとんどは直感的にわかりやすく、Tinderで開発されたスワイプ機能の導入が目立ちます。

しかし、UXにおいていくつか欠点もありました。主に、空気を読めないポップアップや、頻繁に途切れるテキスト、色分けで示されたマッチングシステムのわかりにくい説明などです。これらは大きな欠点ですが、経験のあるUXデザイン会社であれば簡単に対処することができるでしょう。

使ったことのないアプリを徹底的に使ってみることは、UXを研究するためのベストな方法の1つといえるでしょう。


イベント

2017/12/05(火)
Design Thinking Square