オンスクリーンVS.サイドドロワー【アプリのエンゲージメントを半減しうるUIに関する決断】

Screen Shot 2014-04-11 at 15.06.15

サービスに全く触れたことの無いユーザーを想定して開発を行う

ユーザーと開発側の知識のギャップを認識し、あくまで不慣れなユーザーの立場に立って開発を進めることは鉄則です。

しかし、ユーザーのことを考えて使いやすいUIを意識すれば、その分デザインに妥協を迫られるのも事実。開発側としては大きなジレンマを抱えているのです。

そして、そんなジレンマの代表的存在とも言えるのが「オンスクリーンVS.ドサイドロワー」。アプリの開発や改善を行う中で必ず議題に上がるとっても過言でないほど重要な選択です。

オンスクリーンメニューVS.ドサイドロワーとは

そもそも、「オンスクリーンナビゲーション」と「サイドドロワーナビゲーション」って何という方のために説明をしておきましょう。

まず「オンスクリーンナビゲーション」とは  、アプリの画面上に主要な機能を常に表示しておくUIの呼称です。

オンスクリーンナビを採用しているサービスは、Facebookが良い例でしょう。

Screen Shot 2014-04-11 at 13.09.24

一方で、YouTubeなどは、アプリの画面上にはほとんどアイコンを設置せず、「画面の裏側」に主要機能からセッティングに至までのリンクを掲載しています。これを「サイドドロワー(引き出し型)ナビゲーション」と呼びます。

Screen Shot 2014-04-11 at 13.35.35

【シンプルなTOP画面にメニューアイコンが1つ】

Screen Shot 2014-04-11 at 13.35.26

 【クリックすると数々の導線が登場】

オンスクリーンとサイドドロワーのジレンマを言い換えれば、それはユーザービリティとデザインのジレンマです。

オンスクリーンの方がアプリに不慣れなユーザーでも分かりやすく、ワンクリックでアクションを起こせるなど使い勝手は良い一方で、デザインは画面に要素が詰まった印象を与えてしまいます。

反対に、サイドドロワーはデザイン面ですっきりとしたクリーンな印象を与える一方で、不慣れなユーザーからすればどこで何が出来るのか、非常に分かりづらいUIになっているのです。

以前にグロースハックジャパンで紹介した「認知的負荷」にも関係する話ですが、実際にオンスクリーンとサイドドロワーかの違いのみで一体どれだけエンゲージメントに差が出るのでしょうか。デザインを犠牲にするほどの価値がオンスクリーンには存在するのでしょうか。

Zeeboxのケース

その答えに関しておおきなヒントを与えてくれるかもしれないのが、テレビ情報を基に繋がりを紡ぐSNS「Zeebox」です。

Zeeboxはもともとユーザービリティを考慮したオンスクリーンナビゲーションを採用していましたが、2013年にフェイスブックがサイドメニューのA/Bテストを開始し、Google Playチームもサイドドロワーナビを推奨し始めたことから、ビジュアル重視のサイドドロワーにUIを変更しました。

Screen Shot 2014-04-11 at 14.06.50

【Before】

Screen Shot 2014-04-11 at 14.07.00

【After】

ユーザーがUI変更に対応出来るようにと、アプリオープン時にはまずナビゲーションを表示するという施策も取り入れました。

Screen Shot 2014-04-11 at 14.24.36

レビューを見るとUI変更後のユーザーの反応は良好かに思えましたが、アナリティクスを見ると驚くべき結果が。なんと滞在時間が半減していたというのです。

これに慌てた開発サイドは、至急アップデートを加え、元のオンスクリーンUIに回帰することに。変更後のサイドドロワーナビが好きだったユーザーのために、ナビの切り替え機能も追加しました。

この失敗に懲りたかと思われたZeeboxでしたが、念のためにA/Bテストを実施。すると(半減ほどまではいきませんでしたが、)やはり日間利用頻度、週間利用頻度、滞在時間全てにおいてオンスクリーンが良好な数値をたたき出し、結果として現在では全てのユーザーに対してオンスクリーンナビ(トップナビ)を表示しています。

【画像・内容参照: UX designers: Side drawer navigation could be costing you half your user engagement 】

Zeeboxから学べること

もちろんZeeboxの例が全てのアプリやスマホサイトに当てはまるわけではありません。

メインユーザー層のITリテラシーや、利用頻度の高いスクリーンの数によって、オンスクリーンとサイドドロワーの違いがエンゲージメントにもたらす影響は大きく変わることが考えられます。

正解は各アプリが改善サイクルを回して初めて分かることですが、何かセオリーがあるとすれば、Zeeboxの開発者が語るように、1画面で(セッティングなど滅多に利用することのない機能をのぞく)全てのアクションが完了出来るプロダクトであればサイドドロワーメニューを、反対に、いくつかの違ったスクリーンを均等に利用する場合には、オンスクリーンを採用し、アクションまでのステップを減らすことが懸命と言えるでしょう。





Author Profile

東雲八雲
 

SFCを2010年卒業。塾長賞受賞。
専門領域は、ビジネスコンサル・デザイン。NTTデータにて金融事業を企画・運営後、ジャーナリスト団体、『ワードストライク』を立ち上げる。ITブログメディア growth hack japanやCurazy(台湾版)編集長を行う。

 

growthhackjapan

Author: growthhackjapan

グロースハックジャパン運営アカウントです。国内外問わず、グロースハックに関する最新ニュースや成功事例を紹介します。

Share This Post On