2013年05月22日

MobageチャットのUI/UX

interview_oda_001.jpg

UXデザイン部の小田が、「Mobageチャット」のUX構想とUIについて紹介します。

Mobageプラットフォームでチャット機能を提供

interview_oda_003.jpg

Mobageは、2012年1月にリニューアルを行い、スマートフォンへの対応を行いました。
その際、ユーザコミュニケーション機能となる「ミニメール」のUIを最適化しましたが、よりリアルタイム性の高いコミュニケーションが可能な「Mobageチャット」を提供することにしました。 初期は、ユーザ同士のコミュニケーションのみがチャット機能に移行し、この時点ではまだチャット構造は比較的シンプルだったため、タブメニューを採用しクイックにチャット/友達リストにアクセスできるUIを提供しました。
しかし、その後、運営からのお知らせ、ゲーム友達とのグループチャット、イベントチャット(スポーツ観戦部屋やしりとり部屋などのユーザ任意の参加型グループチャット)などのコンテンツを追加することで、情報を整理する必要がでてきました。
タブメニューだと自分がどこの階層に居るのかわかり辛い、迷子になる可能性が高かったたため、ユーザーが迷うことなく目的のメニューに行ける・ゲームからダイレクトにチャットのゲーム部屋に行けるよう、スライドメニューを採用しました。

スライドメニューと戻るボタンの関係性

interview_oda_005.jpg

スライドメニューは左から出てきて、しまう時には左に戻ります。PathやFacebookなど多くのネイティブアプリに見られるスライドメニューは、現在の画面を右部に表示させることができます。
この状態が理想ですが、ブラウザでは端末仕様などにより、実装が難しいためメニュー画面はページ全体を使って表示されます。
ここで注意しなければいけないことは、左から出てきて左に戻るのに、iOSで使われているような [ < Back ] ボタンだと、スライド方向が逆のニュアンスになってしまうことです。戻るボタンの位置を画面右上にすればいいのでは?という意見もチーム内から出ましたが、それはUX的にNGと考えます。
なぜなら、元の画面の右上には「×」ボタンがあり、「戻る」ボタン操作時に連打してしまうと、「×」ボタン誤タップを誘発してしまいユーザービリティを損ねてしまうためです。
リテラシーの高くないユーザ向けに「戻る」の文言もボタン内に配置し、スライドの方向以外にも「前の画面に戻る」という意思を持たせたボタンになりました。

ゲームチャット導入によるユーザ体験の変化

元々Mobageプラットフォームでは、ゲーム内のユーザの温度感がわかりづらいものとなっていました(2013年初頭の時点。現在はいろいろは施策が試され、フラットフォーム上にゲームコンテンツが融合されています)。ゲームに入らないと、どれだけ盛り上がっているのか、バトルやイベントなど、プラットフォーム上では可視化できていませんでした。
ゲームチャットを統合したことで、チャット上で盛り上がりがわかり、イベントに参加したり、ゲーム仲間とのコミュニケーションが容易にとれるようになったことは、運営からもしても、ユーザからしても大きな収穫になったと思います。実際に月のアクティブチャット使用数もかなり上昇しました。

マイスタンプ機能 / チームでのインタラクションの最適化

interview_oda_004.jpg

Mobageチャットでは様々なスタンプを送信することができます。
人気ゲームの農園ホッコリーナやスペースデブリーズ、FINAL FANTASY BRIGADE BREAK THE SEALなど、おなじみのゲームのスタンプをやりとりして会話を盛り上げることができます。
リリース当初はスタンプのカテゴリ数は10種類に満たなく、ユーザ任意での管理の必要性がなかったのですが、スタンプが増えるにつれ、こちらも管理機能が必要になりました。
ブラウザ版での提供となるため、Android端末での機種依存問題や開発コストを考え、シンプルなUIで考えており、エンジニアにはインタラクションの指示を出していませんでした。ところが、何も指示を出していないところから、スタンプリストの順番入れ替えや表示/非表示などのインタラクションを付加してくれました。
ぜひ一度Mobageチャットのスタンプ管理画面からスタンプ編集UIを試してみてください。
ブラウザでも十分アプリライクな体験ができていると思います。

Mobageチャット開発を振り返って

interview_oda_002.jpg

入社1週間目から着手したプロジェクトがMobageチャットでしたが、それまでフリーランス活動や少人数ベンチャー企業に所属していた頃と違った環境ではあったものの、チームメンバーにも恵まれ、バリューを発揮できる環境にアサインされ、幸運であったと思います。
良いサービスを作るためには、自身のパートに対するストイックさと、どれだけそのプロダクトを好きになれるかだと改めて感じました。

現在は別チームで新規プロジェクトに関わってますが、こちらでもチームの人間を上手く巻き込んで自分のバリューを発揮し、愛せるプロダクトを作りたいと思います。


tomo_03.jpg

DeNA Creator Blogは、こちらから
http://creator.dena.jp

/dena.com/