一度にすべての情報を見せてしまうと、本当に伝えたいことが伝わらないと言ったことがよくあります。人の脳は一度に処理できる情報量に限度があるので、それを超えてしまうとフィルタリングしてしまったり、抜け落ちたりします。 そこで使えるのがドリルダウンしていく方法です。今回は円形のズームするUI、Zircleを紹介します。

Zircleの使い方

最初の表示です。虫眼鏡アイコンをクリックします。

そうするとズームします。まだ押せます。

虫眼鏡アイコンがなくなれば、そこがマックスです。

実際に操作しているところです。

選択肢を提示して進めることもできます。

さらにイベントを使って表示を変えることもできます。

ZircleはVueでできているので、DOMの状態を管理する必要なく操作できます。Zircleを使うことで選択型のインタフェースをドリルダウンしながら進めていく、そんなフローが簡単に実現できるでしょう。

ZircleはVue/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

Zircle - A circular zooming UI zircleUI/zircleUI: A circular zooming UI