元プラットフォーム事業本部の小田です。
現在はエンターテイメント事業本部UXデザイン部に所属しております。

前回『クリエイターブログリニューアルと新入社員デザイナーの二週間』というエントリを書きましたが、その中で触れた「Mobageチャット」のUX構想とUIについて紹介したいと思います。

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

Mobageは、2012年1月にリニューアルを行い、スマートフォンへの対応を行いました。
その際、ユーザコミュニケーション機能となる「ミニメール」のUIを最適化しましたが、よりリアルタイム性の高いコミュニケーションが可能な「Mobageチャット」を提供する事にしました。

ChatList


Phase 1 / コミュニケーション機能の移行

「Mobageチャット」はミニメールのリニューアル機能となりますが、突然切り替えると既存ユーザーの学習コストがかかり、アクティブユーザーの低下につながる可能性があります。そのため、リリース直後はベータ版として提供、ミニメールとの平行運用を行い、チューニングしつつ完全移行する流れにしました。

初期は、ユーザ同士のコミュニケーションのみがチャット機能に移行し、この時点ではまだチャット構造は比較的シンプルだったため、タブメニューを採用しクイックにチャット/友達リストにアクセスできるUIを提供しました。

03

02


Phase 2 / ゲームチャット実装に伴う、来訪経路と種別の増加

リリース時はユーザー同士のチャット機能だけでしたが、その後、運営からのお知らせ、ゲーム友達とのグループチャット、イベントチャット(スポーツ観戦部屋やしりとり部屋などのユーザ任意の参加型グループチャット)などのコンテンツを追加する事で情報を整理する必要がでてきました。
04

どこからでも行けるメニュー画面

情報量が増えた事で「メニュー」による機能の分類が必要となりました。

タブメニューだと自分がどこの階層に居るのかわかり辛い、迷子になる可能性が高かったたため、ユーザーが迷うことなく目的のメニューに行ける・ゲームからダイレクトにチャットのゲーム部屋に行けるよう、スライドメニューを採用しました。

05

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

スライドメニューは左から出てきて、しまう時には左に戻ります。PathやFacebookなど多くのネイティブアプリに見られるスライドメニューは、現在の画面を右部に表示させる事ができます。
06
この状態が理想

ですが、ブラウザでは端末仕様などにより、実装が難しいためメニュー画面はページ全体を使って表示されます。

ここまではいいのですが、注意しなければいけない事。

左から出てきて左に戻るのに、iOSで使われているような [ < Back ] ボタンだと、スライド方向が逆のニュアンスになってしまいます。
07


戻るボタンの位置を画面右上にすればいいのでは?という意見もチーム内から出ましたが、それはUX的にNGと考えます。

なぜなら、元の画面の右上には「×」ボタンがあり、「戻る」ボタン操作時に連打してしまうと、「×」ボタン誤タップを誘発してしまいユーザービリティを損ねてしまうため、

なので
08

こうなりました。

リテラシーの高くないユーザ向けに「戻る」の文言もボタン内に配置し、スライドの方向以外にも「前の画面に戻る」という意思を持たせたボタンになりました。

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


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

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

Mobageチャットでは様々なスタンプを送信する事ができます。
人気ゲームの農園ホッコリーナやスペースデブリーズ、FINAL FANTASY BRIGADE BREAK THE SEAL など、おなじみのゲームのスタンプをやりとりして会話を盛り上げる事ができます。
09

リリース当初はスタンプのカテゴリ数は10種類に満たなく、ユーザ任意での管理の必要性がなかったのですが、スタンプが増えるにつれ、こちらも管理機能が必要になりました。

そこで作成したスタンプ管理画面がこちらなのですが、
3-1normal
ブラウザ版での提供となるため、Android端末での機種依存問題や開発コストを考え、シンプルなUIで考えていました。というか、エンジニアにはインタラクションの指示を出していませんでした。

ところがDeNAの気鋭フロントエンドエンジニアは違います。

何も指示を出していないところから、スタンプリストの順番入れ替えや表示/非表示など、JavaScriptでスッテキなインタラクションを付加してくれました。
これについては見てもらわないとわからないので、ぜひ一度Mobageチャットのスタンプ管理画面からスタンプ編集UIを試してみてください。

ブラウザでも十分アプリライクな体験ができていると思います。
80_10MyStamp_Tuts


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

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

良いサービスを作るためには、自身のパートに対するストイックとそしてどれだけそのプロダクトを好きになれるかだと改めて感じました。

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

MdNさんのwebマガジンでも取り上げていただきましたので興味のある方はぜひ、読んでいただければと思います。

現在、UXデザイン部ではUX/UIデザイナーを募集しています。

企画から携わり、要件を具現化しユーザに届けるポジションです。
新規事業開発に関わりたい方はぜひ、こちらから応募お待ちしております。