データ視覚化でドリルダウンと移動をどのように設計するべきですか
データツリーからの情報を示すチャートがあります。ルートは大きな円であり、ユーザーはその中で子供を小さな円として見ることができます。使用可能なスペースに基づいて、ユーザーは一度に複数のレベルを表示できます。ユーザーは、直感的に飛び込む、または飛び出す方法が必要です。制約は
- テキストボタンを持たないことを好む。
- タップでのみ機能するはずです。制御可能なピッチインアウトジェスチャー
- メニューやグローバルボタンを持たない方がよい。
- 各円にはタイトルもあり、クリックすると別のペインに詳細が表示されます。ユーザーが詳細を見たいだけのときに偶発的に飛び込むことは避けなければなりません。
ズームは解決するのが難しくありません。円の内側、テキスト領域の外側をタップすると、飛び込みます。
ズームアウトを実装するにはどうすればよいですか？これは私が円によって意味するほんの一例です 
現在フォーカスされているサークルの外側を使用します。
たとえば、ユーザーがこの画像の緑のゾーンをタップすると、レベルが縮小されます。
一般的に、テキストボタンが気に入らなかったとおっしゃっていましたが、ツリーマップ（これは循環バージョンです）でのズームアウトは、次の例のようにブレッドクラムパスで行われます-> https：// bost .ocks.org/mike/treemap /
ただし、円形ツリーマップは長方形のツリーマップとは異なり、子は親の使用可能なすべてのスペースを使用しないため（円をテッセレーションできません）、ノード内には子孫が使用しないスペースがたくさんあります。これは、ズームインするために最初に選択したノード（またはエッジに表示されている場合は親）を再度選択することによってズームアウトが実行されるこの例で使用されます。 https://bl.ocks.org/mbostock/7607535
もちろん両方のテクニックを使うことができます
彼らが何をしているかについてGoogleマップを見てください。モバイルのデスクトップを使用しているかどうかにも依存します。
デスクトップでは、+ /-でズームインまたはズームアウトしたり、シングルクリックでズームインしたりできます。マウスのスクロールホイールでもズームインまたはズームアウトできます。
モバイル、シングルタップでズームイン、ダブルタップでズームアウト。
これは興味深いインターフェースです。イノベーションは気に入ったが、ユーザーによるテストを受ける必要がある。
4点目が一番気になります。テキストをクリックすることと、テキスト内ではなく円の内側をクリックすることの2つの動作は、多くの混乱を引き起こします。偶発的なタップ、混乱、そしてそうでないこと。
次に、ズームアウトの要件について説明します。一番外側の円の外側に部屋を残してみませんか。ユーザーが円の外側をクリックすると、ズームアウトします。より明確にしたい場合は、小さなクリック可能な領域の同心円を最も外側のデータ円に重ねることができます。次のようなもの、
どちらの場合も、ユーザーが初めて学習を強化した後は、拡大と縮小のための適切なアニメーションが必要です。最も外側のデータサークルでは、境界の半透明のサークルは表示されません。ズームインしたときの最初のアニメーションは、ユーザーに自分のアクションの直接フィードバックとして通知する境界円を作成します。次に、ユーザーはその半透明の部分をクリックしてズームアウトできます。
ズームアウトは一度に1レベルになります。境界となる半透明の円のスタック/レイヤーはお勧めしません。最も外側のデータサークルに完全にズームアウトするには、別の場所でアクションが必要です。