忘れられたズーム

80年代初期のAutoCAD



Zoomは、グラフィックインターフェイスの時代のd明期に、 最初のベクターエディターとともに、かなり前に登場しました。

しかし、それ以来、CADおよびグラフィックプログラムを除き、ほとんどどこでも使用されていません。 彼は、モバイルデバイスが登場したときだけ記憶されていました。大きな写真やWebページは小さな画面に収まりませんでした。

モバイルインターフェイスでは、ズームは非常に親しみやすく自然になり、進化し続けています。 しかし、デスクトップでは、ズームは放棄され、私の意見では、完全に無駄になっています。 ズーム可能なユーザーインターフェイス （ZUI）には、現在の問題をより適切に解決するための多くの利点があります。 これらの利点をズームの種類ごとに、例を挙げて説明することにしました。

幾何学的ズーム

ファイル名による検索、ドキュメント、フォルダー、タグ内の検索がありますが、キーワードを常に覚えているわけではありません。視覚的な検索を使用する必要があります。 また、画像や大量のファイルを操作するとき、それから逃れることはできません。 スクロールの代わりにズームを使用すると、視覚的な検索がはるかに簡単になると確信しています。 ズームを使用すると、すべてのオブジェクトを同時に表示し（1つの画面上のマップ）、適切なオブジェクトをすばやく見つけることができます。 以下に例を示します。



シードラゴン （2006）



これは、インターネット上で大きな画像または画像の大きなコレクションを表示するための技術です。 Microsoftが購入し、あまり知られていないいくつかの製品で使用されています。 この技術に基づいて、Deep Zoomが開発され、一時的にSilverlightの「チップ」になりました。 Ajax APIがありますが、手押し車ではタップを介してのみ機能します。



さらに進んで、ウィンドウなどのインタラクティブな要素をマップできます。 ズームとマッピングを備えたウィンドウマネージャーは、真のマルチタスクです！ 複数のモニターを使用せずに行うことができます。



メティス （2006）



私の意見では、彼らはそれを過度に複雑にし、アニメーション化しました。 メティスを見た前でさえ、私は自分自身の、よりシンプルで、より厳密な概念を描きました（Seadragonのデモ-巻物が必要です）。 ただし、Windowsではこれはほとんど不可能です。



ただし、ブラウザでタブを確実にマップできます。 一人のhabrayuzerが試してみましたが、これは私だけではありませんでした。Mozillaは、 Tab Candyコンセプトを作成した創設者のAza Raskinと協力するためにHumanized従業員を雇った後、Firefox 4に組み込まれました。あまり良くありませんでした-ブラウザウィンドウのサイズを変更すると、スペース内のイメージタブの場所が破壊され、アイデア自体が無意味になりました。 そして、両方のプロジェクトは閉じられているようです。 とにかくマッピングにすぎませんが、Metisseのように、ウィンドウのコンテンツを操作できるとさらに興味深いものになります。 たぶん、これはブラウザーの拡張機能を介して行うことができます（XSS /同一生成元ポリシーの問題を解決する場合）。

セマンティックズーム

ズームを使用して、画像だけでなく他の種類の情報も視覚化できます。 セマンティックズーム-関連する情報をオブジェクトの現在のサイズに合わせるために詳細レベルが変更されると、 地図作成の一般化に似ています。 一方では、インターフェイスを情報で過負荷にせず、他方では、追加のクリックをせずに、そして最も重要なことに、フォーカスを失うことなく、オブジェクトのメタデータを取得できます-一般から特定への迅速な移行。 さらに、セマンティックズームを使用すると、任意のズームレベルでテキストを読みやすくすることができます。



Webマップはセマンティックズームの良い例です。GoogleMaps （2006）の提出により、地図作成またはGISから得られました-かつては非常に大胆なステップでした。 これはおそらく、一般に知られているZUIを備えた唯一の製品です。



セマンティックズームは、オブジェクトにメタデータがある場合に便利です。 良い簡単な例は見つかりませんでした-私は自分の抽象ファイルマネージャーを描きました：



コンテンツとメタデータの両方の粒度が変化しています。



マイクロソフトは、Windows 8アプリケーションでセマンティックズームを使用してデータを抽象化するように開発者に提供しています。 オブジェクトのジオメトリは失われますが、これは興味深い種類のセマンティックズームでもあります。 しかし、開発者はそれを気にしていないようです。

ズームナビゲーション

視覚的なナビゲーションを使用すると、特定の場所またはパスがどのように見えるかを思い出すことができ、再検索が短くなります。 または、ツリーの深いいくつかのレベルを調べます。 通常、これが可能であるとは誰も信じていません。彼らは、生産性だけでは双方向性を維持するのに十分ではないと確信していますが、次の例を示します。 注意、あなたの人生を見た後、おそらく同じになることはありません！



イーグルモード （2008）



主な部分は、「フラクタル」ファイルマネージャーです。これにより、いくつかのレベルを詳しく調べることができます。 とてもクールなことですが、馴染みのあるメニュー、ドラッグアンドドロップ、さらにはパンなど、なじみのある操作がないため、著者以外が実際に使用しているとは信じられません。 興味深いことに、 C ++ APIがあります 。 Androidでも、作者はそれを起動しました-遅くなりません。

組み合わせ

上記の原則と利点を組み合わせることで、多くのクールで便利なインターフェースを作成できます-ここにいくつかの例を示します。



コードキャンバス （2009）



Microsoft ResearchのVisual Studio用の高度なZUI。これは公益にもかかわらず、決してリリースされませんでした。 別の類似したものがあります-Code Bubbles （2010）-もリリースされていません。 ただし、 Debugger Canvas （2013）はまだリリースされています。



ラスキン （2011）



Mac用のビジュアルファイルオーガナイザー、私はまだそれをよりよく知ることができませんでした、私は私の友人からコメントをします：

Raskin for Macを使用してみましたが、Macのディスク上のすべてのコンテンツを含む拡大されたスペースであり、すぐにすべての詳細が読み込まれるため、プログラムが非常に遅くなり、実用に不便になります。 さらに、プログラムはシステムデータも表示しますが、この状況では非論理的です。 この種のアプリケーションは、ユーザーコンテンツに焦点を合わせ、システムを操作するための個別の専用ツールを提供する必要があります。 AzaがArchyでの作業後にこのプロジェクトを行ったことを考えると、ZUIのような強力なアイデアに頼って、なぜ彼がそのような役に立たないインターフェースを作ったのかは非常に奇妙に思えます。

もちろん、 Raskinの名前はJeff Raskinにちなんで付けられていますが、彼の著書The Humane Interfaceを読むことを強くお勧めします。 ここに彼についての別の良い記事があります、本の主な考えはそこで概説されます。



クロノズーム （2012）



「時間の無限のキャンバス」とは、イベントの時系列の視覚化であり、数十億年から1日までの任意の時間間隔で歴史を学ぶことができます。 いくつかの大学（モスクワ州立大学を含む）とMicrosoft Researchによって作成されました。HTML5で実装されているため、特に興味深いものです。 プロジェクトの詳細 。



ゼットユニバース



これは、視覚的な整理と情報取得のためのツールであり、任意の数の「エンドレスデスクトップ」、つまりスペースを作成できます。 それらのコンテンツ（ファイル、Webページなど）は、「視覚的なクラスター」に編成され、スペースを一種の普通のテーブルに変えます。 スペースは、Dropboxを介して他のユーザーと共有できます。 現在、彼らは積極的にベータ版に取り組んでいます。 Zet Universeチームの一部はMicrosoftでビデオProductivity Future Vision （2009）を作成しました。



以前は似たようなことをしたかったのですが、フォルダの明確な階層- セマンティックズームを備えたツリーベースのファイルマッパー - インタラクティブなデモ （スクロールが必要です）。 しかし、すぐに私は別のインターフェースを思いつき、より興味深い関連性のある何かをそれで行うことができると判断しました。



私は常にファイル管理とWebパブリッシングに魅了されました。新しいインターフェイスにより、コンテンツの作成者と消費者に同じ方法で情報を提示できるようになりました。 少なくとも近い将来、「ファイルが死ぬ」とは思わない。 この記事で説明したズームタイプを使用し、ナビゲートするときにズームピークを追加しました。これは、フォルダー内のコンテンツの外観です。 概してファイルマネージャー（デスクトップ、モバイル、クラウド）ですが、写真公開Webアプリケーションの例でズームの操作を示しますが、それはもっと興味深いです。



Monolithインターフェース- インタラクティブデモ （スクロールが必要）



同時に、通常のインタラクションは保持され、作業はエクスプローラーとほぼ同じです-コンテキストメニュー、ドラッグアンドドロップ、クリックによる「フラクタルナビゲーション」の複製、Googleマップのようなパン、アドレスバー（アドレスバー）。 これはデモではありませんが、ポイントは、画面上の要素の数（ 5、200、または1000）は重要ではないということです。少なくともモニター上では、写真は依然として識別可能であり、モバイル上でも遅くなりません。 タイルは正方形である必要はありません。縦横比が保存されている場合は、画像を表示する方がはるかに便利です。



情報を保存およびカタログ化するシステムは、使用プロセスにおいて埋め立て地になる傾向があり、論理的に何かを見つけることは非常に困難になります。 このインターフェイスを使用すると、フラットマッピングは、ネストがなく、すべてのコンテンツがすぐに表示される場合、クリーニングツールとして、またはまったくクリーニングできないツールとして使用できます。 ちなみに、通常のインターフェイスでは、たとえばDirectory Opusにフラットビューもありますが、ツリーが伸びすぎます。

タイルのサイズまたは色をファイルまたはフォルダーのサイズに依存させることができます。先に進み、このようにディスクのルートをマップできます-スペースがどのように消費されるかがすぐにわかります。 または、デスクトップを置き換えます -すべて手元にあります。 しかし、現実に戻って。



Appleは、iOS 7（2013）フォトギャラリーでマッピング、ズーム、データ抽象化の利点を認識しました。



そして、それは本当に便利です。Andriodには残念ですが、そうではありません（UPD： あります ！）。 ズームは、たとえばカレンダーなど、他のiOS 7アプリケーションにも存在します。

おわりに

Zoomはマス製品に登場し、その関連性と有用性を確認しています。特にタッチデバイスでのZUIのさらなる開発を待っています。 しかし、タッチだけでなく、ZUIを使用すると、すべてのプラットフォーム、解像度、アスペクト比が異なるデバイスに同じ制御原理を実装できます。



上記の利点は、アプリケーションでズームを使用することを考える十分な理由であると確信しています。 疑問がある場合は、イーグルモードの著者からZUIの哲学を読むことができます -彼はそこで長所と短所を調べました。



PS：「ズーム」という言葉は、おそらくインターフェイスの写真に由来します。 ロシア語では、「スケーリング」という言葉がおそらくより適切ですが、私はそれが気に入らないので、この記事がどれくらい長く続くか想像してみてください！