« 今度はPSPでFlashが動くらしい | main | はてなアイデア はてなルート直下にcrossdomain.xmlを置いてください »

2006年02月22日

「本当に素晴らしいデザイン」とは、PICASAの変なスクロールバーみたいなものを言う

お気に入り巡回先の、羨望は無知の「なぜ「デザイン」という行為、「デザイナー」という職業は誤解されるのか」や、分裂勘違い君劇場の「エンジニアの方が優れたユーザインタフェースデザインができる理由」、F's Garageの「エンジニアがダメなUIデザインをする原因

のあたりのデザイン論が、あんまりデザインと縁のない人にデザインをわかりやすく説明してて面白い。面白いのだけどちょっと抽象的なんで、具体例の話とか書いてみるテスト。

最近、これらのエントリーで言及されるようなよいデザインを身をもって体験をした。それは画像管理ソフトPICASAのヘンテコなスクロールバー。

今まで気付かなかったけど、あのヘンなスクロールバーは単なるアヴァンギャルドやオシャレじゃあなかった。実は合理性に裏打ちされた素晴らしく美しいデザインだということに気付いた。

まずPICASAを知らない人に説明すると、このソフトのスクロールバーは下の図のようなデザインになってる。

picasascroll.png

普通のスクロールバーと違って、PICASAのスライダはつねにスクロールの中央に同じサイズで存在する。普通はドラッグすることでスライダの位置に対応したページ位置まだスクロールするのだけど、PICASAの場合はこのスライダが車のアクセルみたいに機能する。スライダをドラッグするとはじめはゆっくりと、そしてスライダを上下の端へ近づけるほどスクロール速度が加速をしていく。

僕ははじめてこのスクロールバーを使ったとき、なんでこんなデザインにしたのかまったく理解できなかった。PICASA自体が全体的にオシャレなUIだったので、てっきりオシャレの一部だとしか考えなかったのだ。だけど、実はこのスライダーは物凄く合理的にデザインされた産物だった。

最近、あるコンテンツで数千~数万枚の画像を一覧する検証を行った。そのときリサーチの一環として、最速インターフェースのAmazon最速検索GoogleAutoPagerなんかのUIをテストした。当初は、単純に大量のコンテンツをシームレスに読み込むことを主眼に検証していたのだけど、検証の最中により根本的な問題が見つかった。それは万単位のコンテンツを一覧する場合には、既存のスクロールバーはまったく役に立たないってことだった。

なぜ役に立たないのか?

例えば写真3万枚を表示するとする。表示方法は5列*6000行。このときサムネイル1枚のサイズを160*120、行間を30ピクセルとすると、150*6000でページの全長はなんと90万ピクセルになる。ブラウザの縦幅を600ピクセルとすると1500スクロール分。通常のスクロールバーのようにスライダーがコンテンツの長さに反比例するならば、スライダーのサイズは0.4ピクセルになってしまう。。まぁ、実際にはスライダーには最低幅が存在するから、実際にはスライダーは4ピクセルぐらいになる。ただし問題はそこじゃあない。

問題はスライダーを1ピクセル移動させるだけでページが3画面分もすっ飛んでしまうということだ。写真の閲覧なんてまったくできない。UIとしてまったく機能しないのだ。

PICASAの変形スクロールバーはこの問題を、物凄い鮮やかに解決している。加速式スライダーバーは、1ピクセル単位の移動から千ピクセル単位の移動までまったく同じ操作感覚で行うことができる。なによりも、学習も意識もすることもなく誰もが自然に使いこなしている。


なによりも驚くべきことに、これほど優れた設計なのに、UIという観点からPICASAのスクロールバーは驚くほどに言及されてない、というかこのUIについて分析してるサイトを見たことがない。多分、あまりに自然すぎてその必然性にだれも気がつかなかったんだと思う。僕も自分で検証する機会がなかったら一生気付かなかっただろう。

おそらアイデアソースは、ビデオ編集や音楽編集の機械から得たのだろうと思うが、こういう発想は単なるスタイリストやエンジニアからはまず出てこない。こういうのを考えられる人こそが本当のUIデザイナーなのかなと思う。

自分もいつかこれくらい優れたデザインを生み出せるよういなりたいですよハイ。

<追記>
ちなみに、エンジニアリングベースのデザインみたいな話が好きな人は、ジェームズダイソンの「逆風野郎 ダイソン成功物語」なんて読んでみると面白いんじゃないかと。ダイソンというのは、掃除機業界を変えたあの、「紙パック不要のサイクロン掃除機」の発明者。
彼は「弊社にはスタイリストはいない、いるのは美学を解するエンジニアのみ」みたいなことをのたまう、完全なテクノロジーベースのハイブリッドエンジニア。

投稿者 Taka : 2006年02月22日 00:28

book

dotfla.gif

bookmark

はてなブックマークに追加

del.icio.usに追加

trackbacks

this entry's trackback URL:
http://www.fladdict.net/cgi-bin/mt3/mt-tb.cgi/470

このリストは、次のエントリーを参照しています: 「本当に素晴らしいデザイン」とは、PICASAの変なスクロールバーみたいなものを言う:

» 短期間に本質的なデザイン能力を身につけてプロのデザイナーを追い越す方法 from 分裂勘違い君劇場
デザインスキルを身につけたい人が、デザインやユーザビリティーの本を読むのにけっこうな時間を費やしているのを見ることがある。 そういう人と話してみると、インタラ... [read more]

トラックバック時刻: 2006年02月22日 10:05

» 短期間に本質的なデザイン能力を身につけてプロのデザイナーを追い越す方法 from 分裂勘違い君劇場
デザインスキルを身につけたい人が、デザインやユーザビリティーの本を読むのにけっこうな時間を費やしているのを見ることがある。 そういう人と話してみると、インタラ... [read more]

トラックバック時刻: 2006年02月22日 10:06

» スクロールバーの使い勝手に隠された秘密 from c⌒っ*゚ー゚)っφ メモメモ..
picasaのスクロールバーにはとっても優れた秘密が隠されているそうな [read more]

トラックバック時刻: 2006年02月22日 23:04

» Google新サービス「Page Creater」のナゼ from キャズムを超えろ!
Googleが新LABサービス [http://pages.google.com/:title=Page Creater] をリリースした。 AJAXをバ... [read more]

トラックバック時刻: 2006年02月23日 19:02

» [未来技術]これからは、ユーザインターフェースの良さ=収益 になる from ユビキタス社会の到来を生暖かく傍観する日記
 インターフェースデザインで「ユーザビリティーエンジニアリング」という開発手法がある。ユーザー中心設計を効率良く行うための設計や商品開発の手法で、インターフェー... [read more]

トラックバック時刻: 2006年02月23日 21:17

» [未来技術]これからは、ユーザインターフェースの良さ=収益 になる from ユビキタス社会の到来を生暖かく傍観する日記
 インターフェースデザインで「ユーザビリティーエンジニアリング」という開発手法がある。ユーザー中心設計を効率良く行うための設計や商品開発の手法で、インターフェー... [read more]

トラックバック時刻: 2006年02月23日 21:18

» Windows Live Search (β)でズルズルスクロールバー from Flagyx.blog
以前 Google Picasa のスクロールバーのインターフェイスが優れている... [read more]

トラックバック時刻: 2006年03月08日 18:04

comment

Picasaを使っている人自体が驚くほど少なかったりするのでは…
言われてみるとたしかにスクロールバーは普通のUIとはかなり違うのに、自然に使ってましたね。
というかPicasaが全体的にセンス抜群なのもありますね。

ちなみにレンジの広いデータのスクロールバーについては増井俊之氏が研究していたようです(氏の日記で知りました)。
http://pitecan.com/papers/HI94/HI94.pdf
これに実装されてるそう。
http://pitecan.com/IndexJapan/

by dotimpact : 2006年02月22日 07:56

Picasaは速攻アンインストした。
俺の環境は外付けHDDがずら~と並んでる環境で
頻繁にファイルの移動やるから、あんまり勝手にガリガリやられると
HDDに負担かかってる感じがして怖い。

デザイン的には確かにイイと思ったけどね。
ハード的にはあんまよろしくないんじゃないかと思った。

ていうかね、takaのところはどうかしらないけど
なぜかマルチな人になれって今CAD触らされてるのよ俺。

わけわかんね。マジわけわかんね。

fladdictのコメント欄は俺の日記帳だ!文句あっか!
一応同じデザイナーだし、大目に見てくれ。んじゃあな。

by takaうんこ : 2006年02月22日 19:58

たしかにすごい

by kidd : 2006年02月22日 20:18

私はPicasaのスクロールバー苦手派です。
加速・減速されると酔ってしまうもので。
あと、ざっくりと、おおよその位置にダイレクトに移動できないのですよね。

>3画面分もすっ飛んでしまうということだ。
ですが、前後の近い画面に移動するときは、マウスホイールを使っています。

by aten : 2006年02月22日 21:36

ところでfladdictのロゴの下の灰色の部分はなんなの?
俺の為にあけてまっていてくれたの?
俺の黒くて太いスーパーFlashぶち込んでいい?

by takaうんこ : 2006年02月22日 21:42

最近面白く拝読させて頂いているので久しぶりのコンタクトかねて書込みしてみるテスト。

つうか世の中速度コントローラーと位置コントローラーがあるわけですが(ちなみに自動車のアクセルは厳密には速度コントローラーでなく加速度コントローラーだね。抵抗値があるから速度コントローラーに近い動きするけど。)この二つの使い分け自体は別に珍しくないような。

【位置コントローラー】
(メリット)情報が長大でない限り位置の指定、情報を確認しながらの検索がしやすい/ダイレクトに大体の位置に飛びやすい/たぶん処理が軽い
(デメリット)情報の長大っぷりと情報の確認しやすさが反比例する
→短いビデオや、限られたサイズの情報閲覧には向く

【速度コントローラー】
(メリット)微調整がやりやすい/情報を確認しながらの検索のやりやすさが情報のサイズによって影響されない
(デメリット)比較的、感覚的でない/検索が終わるまでUIから手が離せない/動いて探してストップ、動いて探してストップがやりにくい(※)/検索性を上げるためにはデータを超高速に表示する必要がある(=処理が重い)
→昔はフィルムやアナログビデオや音楽などの生リニアなデータにしか使えなかった

※速度の0を指定するのが、位置コントローラならどこでも手を止めればいいだけだが、速度コントローラの場合は速度0を示す一点を指定するか手をはなさないといけないため。(だからジョグシャトルにはバネがついてるんだな)

だからメディアプレーヤー系のソフトには何で速度コントローラーがついていないのかと思いつづけている俺だった。
2時間のファイルとかポインタでどうやってちょっと巻き戻せっちゅうねん。
というか、この使い分け――UIで速度と位置のどっちを操作するか?――ってハードの世界ではもう何が最適かのメソッドは確立されてて、コンピウタの世界にかぎり、今まで位置コントローラーが大好きすぎただけなのではないかと思う。(たぶん理由は速度コントローラーのデメリットの最後のやつ)
あ、だからやっぱりPICASAのUIデザインっておしゃれなんだな。「既存概念を打ち破る最適化」の意味で。

ちなみに、俺は、いちはやくPC業界は「両手マウス」を実現すべきだと思った。
そんでマトリックス2の真っ白な母艦内部みたいな操作するの。両手を離してズームアップ!みたいな。楽しそう。
昔も言ったか。

あいかわらず文章短くまとめる才能がないのう。

by くろしゃち(もと社長) : 2006年02月23日 09:34

ちょうどPICASAのスクロールバーについて考えてたとこだったのでコメントさせてもらいます。

俺はアレ、すごい使いにくいんですよ。
自分のライブラリの高さがどのくらいで、大体上から何割くらいのとこに○○のデータがあるなあ、って漠然と把握してる俺にとっては、通常のスクロールバーみたいにビシッと位置を移動させることができるのが最良なんす。

ライブラリが肥大したときのスライダーサイズの問題などで仕方なくああいうデザインになってるのかなあとばかり思ってました。

by 6 : 2006年02月23日 18:07

Picasaのコントローラーは、一般的に触ったことのないタイプのコントローラー(飛行機のスロットルみたいなもん)だと思うので、メンタルモデル的な話では認識しにくい、使いにくいってことになるかと。

で、あまり評価に上らない理由として、現状のホイールマウスの方と比べると、コントローラーの上にカーソルをあわせて、ボタンをダウンし、上下にドラッグしないといけないという3段階の操作が必要なので、そこをショートカットしてくるホイールの方が便利な人が多くて当然だと思います。指動かせば動いてくれますしね。

むしろ、Picasaのいいのは、右のサムネイルがフォルダをまたいで表示されるという機能で、付近のフォルダの画像にアクセスするときにスクロールだけでいけるというのがファイル管理の方法としていいんじゃないかと思いました。

by y : 2006年02月24日 03:32

他にも地図ソフトなんかにこんなスクロールバーが使われてました。
そこではあまり使いやすいとは感じませんでしたが。
そもそも地図だとMin,Maxが存在しないから仕方なくそういうデザインにしたのかなーと思ってました。

通常のスクロールバーがまったく役に立たなくなっても気にせず使っていた事に気づかされる。
慣れって怖い

by creeper : 2006年02月24日 09:24

iPhotoのズーム機能の方が使いやすいと思ってみたりする。
ずいーっと小さくして、それっぽいやつを選択してずいーっと大きくすると真ん中に来る。
3万枚に耐えられるかというと、どうかな?

by everes : 2006年03月01日 00:23

ここで言われている問題点のほとんどは、LensBarで解決されているような気がします。試してみては?

by matt : 2006年03月01日 00:33

素晴らしい目の付け所ですね。
Picasaユーザなのに言われるまで気がつきませんでした。
気がつかない位使いやすいのが最高のUIなんだろうな。

by まうえん : 2006年03月01日 12:04

>ALL
ちょびっとゴタゴタしててレスがかけてないです。すいません。
コメントはちゃんと目を通してるんで、後日ちゃんとレスをするか別エントリーかきますです。情報とか意見とか下さってるみなさまありがとうございます。

by Taka : 2006年03月01日 12:32

コメントしてください




保存しますか?