37 Signalsの製品に実装されている『Autoscrolling』
April 23, 2008 8:30 AM written by Gen Taguchi

あいかわらず小粋な製品を作っている37 Signalsですが、「Autoscrolling」なるインターフェースを実装しているようです。とんでもなく細かい挙動なのですが、「神は細部に宿る」をモットーに活動している同社だけにきっちり作りこまれていますね。

↑ ビデオで見たほうがわかりやすいかな。

さてやっている内容ですが。

Flickrなどにも実装されている「クリックすると編集画面に」というインターフェースでフォームが画面の外に行ってしまう問題がありますよね。画面の下のほうのテキストをクリックすると中途半端にフォームが表示されるあれです。

そうしたときに画面をずずっとスクロールさせてフォームをすべて表示し、編集しやすいようにしています。たしかに、こうした小さな違いこそが使い勝手を大きく向上させるのかもしれませんね。

» Designing Details: Autoscrolling the edit state - (37signals)

マンガ風でやけにわかりやすいインターフェース(bitstrips.com)
March 3, 2008 12:59 PM written by Gen Taguchi

マンガのYouTubeを目指すbitstripsですが、サイトの特性とあいまってマンガ風のインターフェースがわかりやすいです。

manga_1.gif

↑ 招待用のコードがある人はこちらへ!

manga_2.gif

↑ ログインしてねー、的メッセージ。

使いどころが難しいですが、やっぱりマンガと吹き出しのセリフはわかりやすいですね。使える場面がないか、検討してみるとよろしいかと。

» Welcome to Bitstrips

面倒なコマンド学習を「linuxの入門に最適です」と言い切るインターフェース
February 19, 2008 10:46 AM written by Gen Taguchi

これはやられた。ユーザーにコマンドを覚えさせるのはなかなか難しいですが、linuxのコマンドと同じにして「linuxの入門に最適です」と言い切った点が素晴らしいです。

linux.gif

↑ SkypeとToDo管理を合体させた「デキる俺」の説明より。

このツールを使っていると何かが勉強できる、という仕組みは良いですね。linux以外にもいろいろありそうです。

» デキる俺: 個人秘書がSkypeであなたのToDoを管理

招待メールを出すまでのだいたいの目安を教えてくれるインターフェース(Heroku.com)
February 11, 2008 2:38 PM written by Gen Taguchi

2.0的なサイトでありがちな「今ベータテスト中だから、準備ができたら招待メール送るよ」といったインターフェースですが、Heroku.comの仕組みがちょっと気が利いています。

メールアドレスを入れるときに「招待メールが送られるまでだいたいこれぐらいね」ということをあわせて教えてくれます。

invite.gif

↑ だいたい3日で送ってくれるらしい。

こういう目安があるとちょっと安心ですね。登録してみようかな、という気にもなります。ご参考までに。

» Heroku | Beta (どうでもいいですが、この画像って・・)

クローラーの作業状況をトップページで知らせてくれるインターフェース(seeqpod.com)
February 6, 2008 11:39 AM written by Gen Taguchi

音楽系の検索エンジンであるseeqpodのトップページでは、「クローラーが今こんな曲を見つけてきたよ!」をリアルタイムで教えてくれます。

seeq.gif

↑ こんな感じでどんどん曲が見つかっていきます。

検索エンジンをはじめて訪れたときは何を検索するか悩むもの。それよりもこうして候補が出てきてくれるとうれしいですね。またちょっとしたにぎやかさを演出する効果もありますね。

実際の動作は以下からどうぞ。

» SeeqPod Playable Search - Find. Discover. Watch. Listen. Share.

検索結果をクリックすると多機能メニューが出現(songza.com)
January 28, 2008 2:37 AM written by Gen Taguchi

ガジェット系ではよくみるインターフェースですが、検索エンジン的なものではあまり見ないかも。

検索結果をクリックすると扇形のメニューが現れて操作を選べます。Songzaは音楽検索なので、その場で再生できたり、評価できたりします。

songza.gif

↑ こんな感じでその場でいくつもの操作ができます。

検索結果はどのサイトにもたいていありますよね。こうしたリッチなインターフェースでユーザーの利便性を高めてもよさそうです。

実際に動作している様子は以下からどうぞ。

» Songza - The music search engine & internet jukebox. Listen. Now.

最近の出品状況がわかるインターフェース(pricehub.com)
January 21, 2008 9:40 AM written by Gen Taguchi

車のオークションサイトのPriceHubですが、トップページに最新の出品状況が表示されて「にぎわい感」がうまく演出されているかな、と。

price.gif

↑ このように最新情報がスクロールしていきます。

ちょっとしたことですが、こうして検索フォーム直下ににぎやかな感じを演出できれば「ちょっと検索してみようかな」と思うかもしれませんよね。

ちょっと気になったので紹介してみました。

» Actual Sales Prices for New & Used Cars, Autos, or Automobiles | PriceHub.com

さりげなく寄付を募るインターフェース(globalPandora.com)
January 21, 2008 9:31 AM written by Gen Taguchi

現在サービス停止中ですが、globalPandraのインターフェースがちょっとおもしろいです。画面のはじっこに現れるこの手。

donate.gif

↑ はしっこにさりげなく登場している手。

クリックするとPayPalの寄付ページに飛びますw。有料サービスにするまでもないけど、やっぱりお金は欲しいかな・・・というときに寄付してもらえるといいですよね。

そうした寄付を募る際にちょっと茶目っ気のあるインターフェースではないでしょうか。

» globalPandora - the box is open

画面をダイナミックに使ったナビゲーション(melissahie.com)
January 3, 2008 2:37 PM written by Gen Taguchi

シンプルかつダイナミックなナビゲーションを採用したサイト。デザイナーのMelissaさんのポートフォリオサイトですね。

scroll.gif

↑ ここからスタート。「READY, GO!」をクリックすると・・・。

scroll_1.gif

↑ 画面がぐいーん!と動いて・・・。

scroll_2.gif

↑ このように切り替わります。

そんな感じでジェットコースター気分でサイトを見てまわることができます。ちょっと気分がいいですね。シンプルなサイトを作りたい方は参考にされてみてはいかがでしょうか。

» www.MelissaHie.com

カーソルについてくる拡大・縮小ボタン(zoomorama.com)
December 18, 2007 2:01 PM written by Gen Taguchi

これはちょっと便利。写真を見せるインターフェースでよく見られる拡大・縮小ボタンがカーソルにくっついてくる、というインターフェースです。

よく拡大・縮小するためにはCTRLキーを押したり、いちいちマウスを動かして左上の拡大ボタンを押したりしなくてはいけませんが、このインターフェースだと最小限の動きで思ったとおりの動作をしてくれます。

zoom.jpg

↑ この+、-で拡大縮小を指示。右側の矢印でダウンロードもできますね。便利。

実際に動作している様子を体験されたい方は以下からどうぞ。ちょっとした工夫ですが、実によくできています。

» ZOOMORAMA

■ 追記

掲載していた例が不適切なものでした。ちゃんとしたものに変更しました。ご指摘いただいた皆様、ありがとうございました。

クリエイティブ・コモンズ・ライセンス

ユーザビリティ向上支援ビービット
Usability tested by BeBit

Powered by
MovableType 3.31-ja

Icons powered by famfamfam.

人気ブログランキング - 100SHIKI
ワード