Pogl UI 2.0を紹介します
11月5日、すべての画面が新しいデザインに変わりました。8月のベータと10月の1.0を経て2.0を作るまでに、ゲームが画面で最もよく見えるように定めた原則をまとめました。
- 11月5日から、すべての画面にPogl UI 2.0が適用されました。
- 原則は3つです。ゲームの上にはボタンやタイトルを置かないこと、ゲームまわりの色はゲーム画面から取ること、半透明の効果は画面の上に浮かぶメニューにだけ使うことです。
- 探索画面は大きなパネル1つとチップ1列に変え、スタジオの編集画面は上部メニューを1列にまとめました。探索リストの計算が2.9秒から0.2秒に短くなるなど、遅かった画面もあわせて改善しました。
Poglを開くと、何も押さなくてもすぐにゲームが始まります。表紙を見て［プレイ］を押すのではなく、開いた瞬間からプレイする方式です。私たちが最も大切にしている点です。
ところが画面を1つずつ確認してみると、ゲームのまわりにはまだプラットフォームの要素がたくさんありました。左の縦メニュー、ゲームの下の黒いボタン列、ゲームとは関係なく決めていた色です。ゲームが主役のサービスなのに、ゲームよりもプラットフォームの画面が先に目に入っていました。
2.0では、ゲームまわりのプラットフォーム要素を減らしました。
ベータ版の最初の画面はグリッド一覧でした
8月13日に最初の体験が作られ、9月までのベータ版ではグリッド一覧が最初の画面でした。急上昇、新しい体験、よく遊ばれている体験の一覧が順に続く構成です。スワイプしながらすぐにプレイするフィードは、「探索」タブの中にありました。
リンクから初めて来た方は、一覧を見て回るよりもすぐにプレイしたがっていました。10月初め、最初の画面をスワイプするフィードに変え、行ごとの一覧は探索に移しました。この画面を1.0と呼んでいます。
その後、初めて来た方を半分に分けて確かめました。フィードから始めたグループはすぐに離脱した割合が26.5%、探索から始めたグループは30.9%で、10秒以内にプレイを始めた割合も72%と66%でフィードが上回りました。ゲームを最初の画面に置くほうが良い結果でした。
原則その1：ゲームの上にはボタンを置きません
2.0の最初の試案は、今とは違っていました。ゲームが画面いっぱいに広がり、いいねとコメントのボタンがゲームの上の右側に半透明の丸い形で置かれていました。タイトルと制作者は左下に表示していました。ショート動画アプリでおなじみの形なので、試案として見たときには一番見栄えが良く、私もその案を選びました。
実際のゲームに当てはめてみると、すぐに問題が見えました。動画と違って、ゲームは画面の端に独自のボタンを置きます。右端にボタンがあるゲームでは、ユーザーがゲームのボタンではなく私たちのボタンを押していました。丸をもっと透明にしても、タッチはやはり私たちのボタンに入りました。
そこで原則を1つ決めました。ゲームの上にはボタンもタイトルも置きません。スマートフォンではボタンをゲームのすぐ下の帯に、PCではゲームの外側の右の欄に移しました。ゲームの情報は、⋯を押すと開く情報ウィンドウで確認します。
原則その2：ゲームまわりの色はゲーム画面から取ります
ボタンをゲームの下に移すと、帯の色を決める必要が出てきました。最初はグラデーションを入れましたが、ゲームの読み込み中で画面が黒いときにも帯には色があり、不自然でした。次にゲーム画面をぼかして帯に透けて見えるようにしたところ、ジョイスティックのような要素がぼんやりにじんで見え、その次に帯全体を同じ程度に暗くしたところ、ゲームと帯の間に境界線ができてしまいました。
そこで、帯に独自の色を決めないことにしました。今の帯はゲーム画面の下端の色を読み取ってそのまま使い、いちばん上は暗くせず、下に行くほど少しずつ暗くなります。ゲームが明るければ帯も明るく、読み込み中で画面が黒ければ帯も黒くなります。PCでは、右のボタン欄と上部メニューの背後にもゲームの端の色を使います。
原則その3：半透明の効果は浮かぶメニューにだけ使います
2.0のメニューは、画面の内容の上に浮かぶ形です。PCの左の縦メニューは画面上部の半透明メニューに、スマートフォンのタブバーは画面下に浮かぶ半透明のピル型メニューに変えました。内容がメニューの下を通るので画面の幅をすべて使え、上部メニューの両端は821pxから1920pxまでどの幅でも下の内容の両端とそろいます。
すべての要素を半透明にしたわけではありません。半透明の効果は、ほかの内容の上に浮かぶメニューにだけ使います。一覧や文章のように読む画面が透けて見えると、読みにくくなるためです。そうした画面は不透明な色のままにしています。
探索画面は大きなパネル1つとチップ1列に変えました
1.0の探索は、今日の体験の下に何列もの一覧が長く続いていました。2.0では、いちばん上に画面の両端まで届く大きなパネルを1つ置きました。このパネルには今日の体験、いま人が多い体験、急上昇中の体験が順に表示され、その下はチップ1列と一覧1つです。
大きなパネルには1つ問題がありました。私たちの表紙は縦長の画像なので、横に引き伸ばすとぼやけてしまいます。そこで同じ表紙をぼかして背景に敷き、くっきりした表紙カードは右側に別に置きました。
編集画面ではサイトメニューを隠しました
ゲームを作る画面にも同じ原則を当てはめました。スタジオの編集画面はサイトメニューと編集メニューが2列に並び、ゲームが見える領域を狭めていました。編集ボタンをサイトメニューの両側に入れたり、コインと通知まで1列に入れたりもしてみましたが、どちらも複雑すぎました。
そこで編集画面ではサイトメニューを隠しました。上部には表紙と名前、画面の切り替えとバージョンの選択、招待と公開だけを1列に残しました。上部メニューの高さが136pxから60pxに縮んだ分だけ、ゲームが見える領域が広がりました。
速度もあわせて改善しました
デザインが良くても、画面の表示が遅ければ使いにくくなります。2.0の準備にあたって画面を1つずつ開き、長く待たされる箇所もあわせて見つけて直しました。
最も大きく改善したのは探索です。おすすめ一覧を作るとき、枠を1つ埋めるたびに残りの候補すべてを最初から計算し直していました。公開体験が5,000個ほどになると、この計算だけで2.9秒かかっていました。前の方の枠だけを従来どおり1つずつ選び、残りは一度にまとめてシャッフルするように変えたところ、0.2秒に短くなりました。前の方に表示される体験の順番は変わっていません。
フォロワーの多いアカウントのフォロワー一覧は、開くたびにフォロワー全員を並べ替えてから先頭の60人だけを切り出して表示していました。必要な分だけを新しい順に読むように変え、2.1秒から0.14秒に短縮しました。コミュニティのおすすめ、フォロー中、体験別のチップも、押すたびにページ全体を読み込み直すことはなくなり、一度見たタブはすぐに表示されます。
ゲームが始まるまでの時間も短くしました。ゲームのグラフィックを最初に準備するとき、開発用のエラーチェックがプレイヤーの画面でも実行され、最初のプレイが遅れていました。このチェックは私たちの配信前チェックでだけ実行するように変え、遅い4G環境を再現して測ってみると、グラフィックの準備に2秒以上かかっていたゲームが1秒前後になりました。
アプリを最初に開いたときの画面も変えました。アプリが表示したロゴをウェブが同じ位置、同じ大きさで引き継いで表示し、画面の準備ができると小さくなって消えます。このアニメーションのせいで待ち時間が長くなることはありません。画面の準備ができた瞬間にロゴは消えます。
最後に、画面ごとに違っていた形をそろえました
全体の構成が決まったあと、PCとスマートフォン、ダークモードとライトモードで画面199枚を撮り直し、1枚ずつ確認しました。そろっていない箇所が82か所見つかりました。⋯を押すと開くメニューだけでも6種類の形が混ざっており、ページタイトルの大きさも画面ごとに違っていました。メニューは半透明メニュー1種類に、選択チップは1つの形に、ページタイトルは同じ大きさにそろえました。
プラットフォームの画面はゲームを隠してはいけません
ゲームプラットフォームの画面要素は、ゲームを隠したり操作を邪魔したりしてはいけません。動画アプリで広く使われている配置も、ゲームの上では操作の邪魔になりました。動画は見るだけですが、ゲームは画面全体を押して操作するからです。
ゲームまわりの色は、私たちが決めるよりもゲーム画面から取るほうが自然でした。私たちが選んだ色はいつもどこかのゲームと合わず、ゲーム画面から色を取るようにすると、ゲームごとに調整しなくても境界線が見えなくなりました。
画面をシンプルにする作業は、どの画面でどの要素を隠すかを決めることでした。編集画面でボタンを減らす案は何度作っても複雑なままでしたが、その画面でサイトメニューを隠すと問題が解決しました。
新しい画面で気になる点があれば、コミュニティまたはアプリ内のヘルプからお知らせください。1つずつ直していきます。
