Dev Workshop - 何故こんなUIになっているのか？

[[DE]Kanna]

何故こんなUIになっているのか？

 

 

 

翻訳者：　rb264ag さん （忙しい中ありがとうございます！）

概要
一年半以上にわたって、テーマとバックグラウンドが適用される新たなUI(ユーザーインターフェース)の作成を少しずつ進めており、それと同時に、UIの機能性の向上にも努めてきました。

現在Warframeには約200の画面があり、新コンテンツ実装のため今でも頻繁に追加されます。このことから、全てを変更するには非常に長い時間がかかることがお分かりいただけるかと思います。 刷新を始めたときには131の画面に変更が必要だったのですが、現在残り70というところまできています。 つきましては、変更の必要性や、現在の変更案に至ったその過程についてお伝えしたいと思います。

行きついた選択肢
お寄せいただく意見で最も多いものが以下の二つです。

     1. もっと多くの情報が欲しい
     2. 表示量が多すぎる

一般的には、この二つは相反するものと言えるでしょう。 ごくまれに、スクリーンの表示量を減らしつつ、情報量を維持できるような方法が見つかることもあります。しかしながら、ほとんどの場合両方を解決することはできません。

この問題を解決するために行きついた妥協案が、段階的開示というものです。これはつまり、情報の量は追加するのですが、マウスオーバーやクリックという動作を経ることで、追加された情報が表示されるようにする、ということです。

アビリティ画面
例として、アビリティ画面を見てみましょう。 この画面を選んだ理由は、変更したときに多くのテンノから不満の声が上がっていたことが記憶に残っているからです。まだ不満だという人もいるでしょう。 従って、何故今のものに変更したのか、その理由を説明するにあたって適切な事例になるでしょう。

UX(ユーザーエクスペリエンス)は、会話のように考えられることが多いです。今回の例では、プレイヤーがアビリティをクリックしています。つまり、「Chromaのアビリティって何？」と聞いているわけですね。そこで私たちは、それぞれに小さい画像を表示したり、ダメージを表示したり、説明書き、Modがどう影響するのか、といったことを返答として見せるのです。 会話でいうなら、私たちの返事は「アビリティはこの四つです。詳細を知りたいアビリティはありますか？」というような形になるかと思います。そうしてプレイヤーは知りたいアビリティを選択します。 表計算ソフトに近いのが、旧アビリティ画面です。扱われているデータを良く知る人からすれば便利な画面です。しかし慣れていない人が見ると、情報が多すぎて頭に入ってこない、という印象を抱きます。

新バージョンは原則的に会話の形に従って構成されています。パッシブ能力、アビリティ、そしてヒントの6つのオプションを提示し、詳しく知りたいものを選んでもらう形式です。 同時に、ジオラマを使用してWarframeを画面中央に表示し、彼らの雄姿を楽しんでもらいます。

では、情報を追加することでもう一つの問題は解決されているのでしょうか？ 
アビリティの説明画面が個別に表示されるようになったことで、動画を追加することが可能になり、画像だけよりもわかりやすく説明できるようになりました。 変更を加える前は表示スペースの都合上、説明は非常に短いものする必要がありました。しかしながら、Gaussのアビリティ説明から見て取れるように、今ではより詳しくアビリティを説明できるようになったのです。 能力値の表示にも同様の問題があり、増強Mod用の項目を追加するのが困難でした。 新バージョンでは更に、数値を並べて比較できるようにもなりました。以前はボタンを押して切り替える必要があった機能です。 そしてヒントの追加により、アビリティの相乗効果や細かい仕様等、wikiにしか載っていなかった情報をプレイヤーに提供できるようにもなりました。

ツールチップ

先ほどUXは会話のようだという話をしましたが、いつも同じ会話になるとは限りません。 「Chromaのアビリティって何？」というのは、Chromaを使い始めた人の疑問だと思います。しかし経験者がアビリティ画面でクリックしたときの疑問は、「自分が使っているModはChromaにどう影響しているのか？」のようなものではないでしょうか。 アビリティ全てを表示することはできないので、現バージョンにおいては確認するのが少し面倒になってしまったのは否定できません。 その問題を解決するために行ったのが、会話が起きる場所の変更です。アップグレード画面から直接確認できるようにすることで、画面を行ったり来たりする手間をなくしたのです。

ツールチップ形式への変更には、配置の自由度が大幅に上がるという大きなメリットがありました。以前にアビリティの能力値をアップグレード画面に追加しようとしたなら、全く新しいデザインとコードを作成する必要があり、画面上のスペースの都合も考慮すると恐らく実行は不可能だったでしょう。 しかしツールチップ上で表示するようになった現在では、マーケットやアーセナル、更にはチュートリアルで最初のWaframeを選ぶ画面にさえ表示することが可能になったのです。

将来のものへの適用

今回のアプローチ方法を用いた過去の事例から、将来的にどのように変わっていくのかということを推定していきましょう。アーセナルを例にしてみます。 今の仕様では、武器を選ぶとアイコン、名前、ランク、レンズ、やフォーマの数、マスターしたかどうかなどが表示されていますね。 まだデザインしてはいないので確定ではないのですが、恐らくレンズやフォーマの情報は今の位置に表示せず、ツールチップ上で表示するように変更されるでしょう。 加えて、ツールチップ上には今表示されていない情報が表示されるでしょう。例えばカタリストやエクシラスアダプターといったものです。必要マスタリーランク、武器の説明や能力値のような今クリックで表示されるものも追加されるかもしれません。 繰り返しになりますが、情報量は増やしていくけれど、表示のためにプレイヤーのアクションを要求する、という形がおおよその方向性になります。

しかし先ほどのシンプルな事例でもいくつか疑問が生じます。 例えば、フォーマの使用数をマウスオーバーして表示するようにしても大した問題にはならないでしょう。今すぐに知らないといけない情報ではないので、少し時間がかかっても大丈夫かと思います。 しかし、レンズの情報は重要です。Naramonレンズを装着した武器を使いたい、ということはあるでしょう。そんな時にマウスオーバーで確認していくのは面倒です。検索バーがあるとはいえ。 レンズに関しては装着済の場合だけ表示されるというメリットもあります。表示がごちゃごちゃするということもないので、そのままにしておいても良いのでは、と言えなくもありません。今まで説明してきたことと真逆になりますけどね。 このことから言えるのは、一つの方法で全ての問題を解決することはできないということです。ケース毎に試行錯誤し、結果を分析していく必要があります。幸いなことに、皆様からのフィードバックおかげで、失敗したときにはすぐに気付くことができます。

変更を加えていくにあたっての大まかな原則は以上になります。 しかしながら、細かくはありますが、おなじく重要な部分に関してもお伝えすることがあります。

一貫性

この数年間で、色んなシステムがあったかと思いますが、同じように多くの画面が存在しました。しかしながら、同じような問題に対し、いつでも同じ解決策を適用してきたわけではありません。つまり、一貫性に欠けることがあるということです。非常に基本的な例では、とある要素と関連した情報を、グリッドを使いどのように表示するのか、というものがあります。

ほとんどの画面を、グリッドを左に配置し、右側に詳細を表示するという形に変えていっています。 上に挙げた例の中にも、既に修正済みのものが多くあるかと思います。 いつも成功というわけではありませんが、全体に一貫性を持たせるための試行錯誤が続いているというわけです。

アイテムラベルはなぜ選択式？ デフォルトがオフなのはなぜ？

正直に言いますと、全く同じ疑問を抱くことが時々あります😅 我々の論理としては、90%のアイテムに区別可能なアイコンが設定されていて、当時の他のゲームを見てみると、アイテムにラベルが無く、より小さいサイズの似通ったアイコンを用いている場合があったので、ラベルが無くても大丈夫だろうということでした。 90%はいいですが、残り10%が問題です。わかりやすい例はレリックや武器のパーツのアイコンでしょう。後者に関しては、完成品のアイコンを角に表示するという案を実装したいのですが、後回しにされているのが現状です。 そしてレリックに関しては、ラベルは常にオンになっています。 

これはいい解決策なのか？ ラベルを排除して少しは画面がすっきりしたのだろうか？ 正直なところ、確実にそうだとは言えないでしょう。 私個人は、ラベルをオンにせずプレイしており、特に問題はありません。 しかしながら、必要だと強く感じる状況があるのも確かです。直近の例でいえば、アビオニックのスクラップ画面です。ここではラベルは強制的にオンです。 

レールジャックのUIでは決定するのに長押しなのは何故？
レールジャックのUIで試験中の新しい要素のひとつですね。確認用のポップアップ画面は信頼の置ける方法です。しかし短所がないわけではありません。極性を追加する画面を例として見てみましょう。

何が起きるのかが書いてありますね。しかし自分がしようとしていたことが隠れてしまっています。極性を付与しようとしたスロットがどこかわかりませんし、どの極性かもわかりません。私の場合、間違った極性を選んだのかと不安になり、キャンセルして確認しました。 長押しで決定の場合、状況がわからなくなるということがありません。長押しをしているとき、選択したスロットと極性が隠れることがないからです。

確認ポップアップの別の欠点は、数が非常に多いため、ほとんどの人が読むのをやめてしまうことです。 めったに表示されないのであれば、何と書いてあるか注意して読むでしょう。 極性付与済みのスロットに同じ極性を付与しようとしたときに、特別なメッセージを表示してほしいという要望が二度ありました。 実は何年も前からゲーム内に存在しているのですが、ポップアップが他にも数多くあるため、存在に気付かないのです。

それでは、どこもかしこも長押しで決定になるのか？ 正直に言うと、わかりません。 皆さんのコメント次第になるのかと思います😀 こんな長い文章を書こうと思ったのも、主には反応を見たかったからです。やっていることにも理由があるのだということは理解してほしいです。しかしながら、最終的にはプレイヤーのためにゲームを作っています。理由を知ってもらい、私たちが正しい方向へ進めるようご協力していただけると幸いです。

最後になりましたが、現在取り組んでいるものをいくつか共有したいと思います。複雑な内容なので、すぐに実装、というわけにはいきませんが、制作に日々励んでおります。

ワールドステータス画面
劇的な変更を加える予定はありませんが、UIテーマの適用や、いくつかの問題の修正という内容が予定されています。Modが引き伸ばされて表示される問題や、侵略やソーティーのタブにおいて、マウスオーバーするとスクロールバーの挙動がおかしくなる問題等を修正予定です。 また、エクストラクターのタブを追加する予定です。タブを開けば、進捗状況や、どこに展開しているのかが一目でわかるようになります。

マスタリーテスト

マスタリーテストの前後に表示される画面を刷新します。以前Devstreamでお見せした新しいデザインのマスタリーバッジも実装される予定です。 この画面から直接練習ができるよう、ボタンを追加しました。 マスタリーランクとは何か、何故上げるべきなのか、といった新規プレイヤー向けのヒントも追加しています。

ミッション終了時

ミッション終了時の画面を大幅に変更します。第一に、アイテムとModのセクションを一元化し、一度に表示されるアイテムの量を6から10へと増やします。 シンジケートとアイテムの経験値も一元化され、フォーカスや性能値等がここで確認できます。

スタッツには専用のセクションが設けられ、ヒール量や敵の無力化時間といった新しい項目が追加されます。
更に、目覚ましい功績をあげた際に送られる表彰も追加します。例えば、多数のシンジケートメダルを発見したり、味方を蘇生したり、レールジャックでの火災を消火した際に表示されます。 ダメージを一番多く与えることだけが重要なのではなく、チームの助けになるような行動も評価に値する行動だとということですね。

そして最後に、チーム全員を表示することでより見栄えのする画面に仕上げています。

ここまで読んでくれたんですね！

10ページ目も終わりに近づいているので、消化しないといけない情報の量がGrendel級ですね。 前述したように、UXにおける一般的なアプローチは会話のように考えることです。(アビリティをクリックしたプレイヤーが聞いているのは「Chromaのアビリティって何？」) このDev Workshopの場合、「DEのUIデザインのアプローチって？」と聞いていることでしょう。これで答えがわかったわけですね！ WarframeのDNAに起きた変化は、プレイヤーからのフィードバックだけが要因ではなく、実際にどのように遊ばれているかということからも影響を受けています。 これら二つを柱とし、200個もの画面にわたる旅を続けていきます。

アップデート

コメントを読んでいる最中なのですが、中でも頻出のものに少し触れたいと思います。

アイテムラベル：　いくつか良い指摘がありました。ほとんどのアイテムに区別が可能なアイコンがあったとしても、特にトレードの際にはアイコンのないもの(レリック、Primeパーツ)の方が重要度が高いという点です。 また、名前が表示されていないとアイコンがどのアイテムのものなのか覚えるのが難しいという点も良い指摘です。

ミッション終了時：　他のグリッドと同様、アイテム数は表示されます。例が示しているのは、アイテムが同時に10個表示されるということです。 また、例に使用しているのはまだ開発中のものなので、実装までに変更は加えられます。 両方のセクションにソート機能があります。性能値を獲得したとすると、進捗の項目で上部に表示されます。シマリスのデイリーミッションを完了したとするとこれも上部に表示されますが、敵を何体かスキャンした程度では下の方に表示されるでしょう。 ミッションで獲得したものの中で特に重要なものを表示するのには、恐らく6つのスロットで十分かと思います。

二つのUIの切り替え：　残念ながらこれは厳しいです。前述のとおり200以上の画面があるので、新旧両方を維持するための作業量をこなすのは不可能です。

バグについて：　コメントにバグ報告があるのを見つけました。QAチームに記録するよう伝えておきます。