ノブ型UIで直感的な入力を「jQuery Knob」
jQuery Knobはノブを使って値の設定を行うコンポーネントです。スクロールで値をスムーズに変化させられます。
Webで標準で使えるコンポーネントはパターンがとても少なく、表現力が乏しいのが欠点です。今回紹介するjQuery Knobはノブ型のコンポーネントでスクロールを使って値を設定するタイプの新しいコンポーネントになっています。
デモです。サークルの中でスクロールすると値がスムーズに変化します。
大きさや数字を非表示にしたりできます。
表示のみに設定もできます。
アクションで表示を行うこともできます。
iPodのホイール風表示です。マックスを設けずに表示もできます。
jQuery KnobのデザインはCanvasを使って描かれており、画像を用意する必要はありません。また、タッチやマウスホイール、キーボードによる入力に対応したイベントが取れるようになっています。テキストフィールドを置き換えるので、そのまま数値入力の代替えとして利用できます。
jQuery KnobはjQuery/JavaScript製、MIT License/GPLのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
この手のUIとしてはiPodのデザイナーが作った世界で最も美しいサーモスタットとして知られるNestのデザインを彷彿とさせます。もちろんiPodもそうです。回転式入力というのも使いどころがありそうです。スクロールの代わりに使ってみたりしても面白そうです。
キーボードの入力よりもマウス、そしてマウスよりも直感的な入力ができるのではないでしょうか。直感的な入力はiPhoneやiPadに代表されるタッチスクリーンが代表的です。マウスやキーボードを介するデスクトップでの入力はやはり直感的とはいえません。今後、インターネットの利用者が増えるに従ってさらにそうしたUIの改善は求められるでしょう。