2006年にサービスが開始されてから怒濤の勢いで普及し、いまや Web 上で誰も彼もが利用している Twitter。そしてサービスを便利に利用するため、世界には数多くのクライアントソフトウェアが蔓延っています。これらを全て把握することは、困難の域を通り越して、もはや不可能と言っても過言ではありません。そんな中、Mac や iPhone、iPad 上で世界的に流行っているクライアントを独断でいくつか選び、メンションを送るときなどに便利なユーザー名補完機能に焦点を当て、その UI を比較してみたいと思います。

Twitter Inc. が atebits の Tweetie を買収し、公式クライアントとして無料で配布しているもので、Mac、iPhone、iPad それぞれに提供されています。

Mac App Store から配布されています。最新のバージョン2.1でユーザー名補完機能が搭載されました。“@” を入力するとすぐ下にアイコンとユーザー名のリストが表示され、文字を入力する毎にインクリメンタルに候補が絞られていきます。ここから選択することでユーザー名が入力されます。キーボードからもアクセスしやすいように配慮されていることにも注目です。

iPad 版とはユニバーサルで、App Store から配布されています。“@” の描かれたボタンを押すか、“@” を入力することでリストが表示され、やはりインクリメンタルに候補が絞られます。これをタップするとユーザー名が入力されます。

iPhone 版と同じように動作します。

公式クライアントでは、iOS 版で “@” ボタンによるアクセスが用意されているほかは、Mac 版も含めた3つでほとんど同じように動作しています。また “#” から始まるハッシュタグでも、同様の補完機能が用意されていることも付け加えておきます。

公式クライアントという特性上、Twitter Inc. が想定する Twitter サービスの使い方に沿って各機能が実装されているという印象を強く感じます。

Twitterrific は Iconfactory が世界で 初めて Mac 向けに作ったクライアントに端を発するソフトウェアです。現在のバージョン4シリーズでは、Mac OS X の Cocoa フレームワークに iOS の Cocoa touch フレームワークを移植することを目的とした、“Chameleon Project” という彼らが主催するオープンソースのプロジェクトによって、Mac 版と iOS 版でコードベースの多くを共有しており、そのためそれぞれの機能や UI はとても似通ったものになっています。またどのプラットホームでも基本は広告付きの無料版であり、Mac では Mac App Store で有料版を購入するか Iconfactory のサイトからプロダクトキーを購入することで、iOS 版ではアプリ内課金で、それぞれ広告を非表示にすることができます。

“@” に続けてユーザー名を入力することで、Tweet を書き込む欄の下側にアイコンとユーザー名の候補が横に並んで表示され、インクリメンタルに絞り込まれていきます。この横に並んでいるのが特徴的で、ちゃんとスクロールもします。

Mac 版と同じく、候補が横に並びます。候補がキーボードのすぐ上に位置していて、選択するときにあまり指を移動しなくても良いように配慮されています。

iPhone 版と同じ感じです。

Chameleon Project によって、ユーザー名補完についてもプラットホームを問わず同じような UI になっていることが分かります。マウスカーソルを前提にした UI と、タッチを前提にした UI ではそもそもまったく考え方が異なるため、果たしてこの同じような UI であるということがどういった意味を持つのか、十分議論が必要な部分ではありますが、それでも Twitterrific では最低限の調整は加えられていることが伺えます。

また横に候補を並べることにより、ユーザー名の長さが短い場合に表示面積を節約できるというメリットが生まれています。これは副次的に、人間の認知の中でユーザー名の長さがある一定の役割を果たしていると仮定すれば、目的のユーザー名を見つけやすいという効果が得られている可能性があります。

iPhone 向けのアプリを自立するロボットのキャラクターに見立て、次々と独創的な UI と共に送り出してきた Tapbots が挑んだ Twitter クライアント、それが Tweetbot です。鳥型のロボットに見立てられたこのアプリは、これまで同様に特徴的な UI を備えています。全体的なレイアウトは公式クライアントを下敷きとしているように見受けられますが、随所に独特の工夫がみられます。

自動補完の UI は、“@” を入力すると現れる吹き出し風のボタンか、またはキーボードのすぐ上に表示されているツールバー上のボタンを押すことで表示されます。これはモーダルに画面を覆って、インクリメンタルにユーザーを検索するようになっています。

基本的には公式クライアントと同じ構成ですが、“@” を入力したあとにもう1ステップ、ボタンをタップするという動作が加えられています。これは排他的にに検索画面が表示されるため、“@” をユーザー名以外に使いたいとき、すぐに画面遷移しては困ることから、明示的にそれがユーザー名であることを指示するという意味合いがあるのだと考えられます。しかしこれは排他的な検索画面を表示することで起きる問題であり、公式クライアントがそうであるように非排他的な選択肢を提供すれば、1ステップ操作を減らせるのではないかと思われます。排他的に検索画面を表示しなければならない合理的な理由があるとは思えませんし、検索するという UI に何かこだわったのかもしれません。

ここまで大きく分けて3種類、プラットホームも分けると7種類の UI を見てきました。それぞれ少しずつ、機能の見せ方が違っていました。多くの部分が似通っているのは、この機能自体がある程度その見せ方を規定しているからであると考えられます。逆にこの少しずつの差異は、その開発者が何を考えてデザインしているのかを知る手がかりとなります。

UI のデザインとは、すなわち機能そのもののデザインであると言っても過言ではないでしょう。利用者にとってはその実装に関わらず UI こそが機能です。ですから、ひとつの機能をソフトウェアに追加するとき、機能を実装することよりその UI を実装する方がよほど神経を使うことも少なくありません。デザインとはそれほど重要なことなのです。機能の働きが正しく利用者に伝わるように、そしてそれが不便を強いたりすることのないように。

[blackbirdpie id=”69091587338153984″]