Facebookネタ。
Facebookでは友達にメッセージを送る時にURLを入れると自動的にそのサイトの簡単な説明を文末につけてくれます。しかもその説明に使う画像をサイト内から引っ張ってきてくれます。
↑ メッセージ中にURLを入れるとこうした画面に。
↑ 実際に送られるメッセージ。こういう風に見えます。わかりやすい。
引用したサイトのタイトルとメタタグを引っ張ってきているようですね。単にURLが書かれているとそこをクリックするかどうか迷いますが、こうして説明がついていると良いですね。
良くできているなぁ・・・。
画面遷移なしにさくさく使える画像検索サイトのimageryですが、「次の検索結果へ」のインターフェースが素敵です。
↑ 次の○件、を指定することができます。
ちょっとしたことですが、「次のページではもっと見たいな」と思うときがありますよね。応用しがいのあるインターフェースではないでしょうか。
実際に動作している様子は以下をどうぞ（なお、Firefoxでしか見れないようです）。
SNSが盛り上がるためには参加者が自分の情報をなるべく書き込んでくれることが重要です。
そこでLinkedInではプロフィール編集ページに一工夫加えています。このページの目立つところに「今何パーセントぐらいの情報を書き込んでいます。あと○○を書けば○%あがりますよ」と表示しているのです。
別に100%になったところで何かがもらえる、というわけではないですが、人の心理として「ここは100%にしとくかね」と思ってしまうもの。なかなか上手い仕組みですよね。
↑ こんな感じ。25%って言われるとあと75%埋めちゃおうかな、と思いますよね。
ちょっとしたゲーム仕立てにすることでユーザーの情報を促す、というのは悪くない手法かもしれません。
最近SNS系のインターフェースを見ていると、写真を自動でかっこよく並べてくれるインターフェースがちらほらと登場しているようです。
普通、写真をいくつかアップすると、同じサイズでずらずらと並ぶだけです。
しかしBadoo.comでは写真をアップするだけで、自動的にサイズをばらばらにして並べてくれます。
↑ こんな感じ。雑誌みたいでいいですよね。
ちょっとしたことですが、こうしたセンスある仕掛けは随所に組み込みたいですよね。実際に動作している様子はBadoo.comで会員登録して見てみてくださいね。
» Badoo
ちょっと調べたいことがあって、米国Yahoo!のファイナンスページに行ったら「サイトがバージョンアップしました！新機能を紹介するツアーを行いますか？」とメッセージ。
もちろん！と思って「Yes」をクリックしたら、サイト上でツアーを始めてくれました。新機能が加わったところに吹き出しが現れて説明をしてくれます。
↑ こんな感じ。
そして「次の機能へ」をクリックすると、画面がずずっとスクロールして、次の新機能を説明する吹き出しが。
↑ スクロールしていく様子が気持ちいい。
こういう新機能のツアーは別のページや映像で行う場合が多いですが、こうしてサイト上で行ってくれるのも悪くないですね。
ただ、初回しか見る事ができないので「また見たいなぁ」というときに探しにくい、とか、見れないとかのデメリットはありそうですが・・・。
動作している様子は以下からどうぞ。
※ 今回の記事は「ウェブサービスインターフェース勉強会」でのbeBit社のプレゼンから。
今回ご紹介するのはレシピサイト、Cookpad.comの事例です。Cookpad.comでは有料会員（月額300円）があるのですが、その会員数が伸び悩んでいました。
そこでbeBit社に相談するのですが、それまではかわいいバナーをどーんとサイドバーに貼っていました。
↑ なかなかかわいらしいバナーです。凝っていますよね。
しかしユーザビリティ調査をしてみると、そのバナー広告がほとんど見られていないことがわかりました。最近は「広告＝邪魔なもの」というイメージがありますよね。
そこでbeBit社ではこのバナーのかわりに次のテキストリンクを提案しました。
↑ レシピの検索結果の途中にリンクを配置。
有料会員ではレシピを人気度順に並び替えられるのですが、それを訴求するために検索結果画面にこのようにテキストを配置したのです。
その結果・・・なんと有料会員数が3倍に！
たった一行のテキストリンクでも、使い方によっては、制作費のかかるバナーよりもぐっと効果があることがわかるかと思います。
安易にバナーを貼るのではなくて、ユーザーがどういう心理でこのサイトを使っているのかをまず考えましょう。そして、ニーズが発生した時点でタイミングよくニーズを満たす提案をしていくと成果があがりますよ、という事例でした。
beBit社では他にもユーザビリティテストの結果をまとめて公開しています。こちらのブログもよろしければどうぞ。
インフォシークのトップページでは、表示させる記事数を調整できるスライダーがついています。
↑ こんな感じ。
もうちょっと注目記事が見たい、というときに便利そうですね。ちょっとしたことですが、「お！」と思わせるインターフェースで好感が持てるのではないかと。
最近はどのサイトにもついている「検索」機能。その検索をちょっとだけ親しみやすくしてくれるインターフェースとして以下はいかがでしょう。
↑ 「何を探す？」の答えを吹き出しの中に入れられます。
サイトと会話しているようでなかなか素敵ですね（でもない？）。
実装されているサイトはこちら。
※ 今回の記事は「ウェブサービスインターフェース勉強会」でのbeBit社のプレゼンから。
beBit社から「画像一つでもコンバージョン率がこんなに違う」という事例を紹介してもらいました。今回事例としてご紹介いただいたのはある住宅ローンサイトの画像について。
↑ 説明してもらった同社コンサルタントの土井さん。
あなたは住宅ローンサイトで「お問合せはこちらから」というページをつくるとしたら、そこにどんな画像を使いますか？
やわらかい印象のイラスト、ヘッドセットをした女性が電話に出ている写真、などが候補にあがると思いますが、ユーザビリティテストの結果、一番効果的だったのは・・・（考えてみてください）・・・「男性社員の写真」でした。
よく「お問合せ」というと「女性のオペレータ」を連想してしまいますが、大事なのはこれは住宅ローンのページだということです。
実際にテストをしてみると「支店にいるようなローンの専門家が対応してくれるなら申し込みたい。普通のお問い合わせなら申し込みたくない」ということがユーザーの声からわかったのです。
そこで専門知識を持っているイメージのある男性社員の写真を使ったところ、コンバージョン率がぐっとあがったということです。具体的な数値は秘密らしいですが、クライアントは大喜びだったそうですよ
※ 念のために言っておきますが、これは女性の写真が悪いとか、女性には専門知識がない、とかの意味ではもちろんありません。女性の写真が効果的な場合も多々あります。
ここからわかることがいくつかあると思いますが、サイトで画像を使う際には以下のことに気をつけたいですね。
こうした作業をしてはじめて、ユーザーにとって違和感のないサイトが出来上がるのでしょうね。そして違和感のないサイトだったらスムーズに次の画面に行ってくれるのかもしれません。
言われてみれば「なーんだ、そんなことか」かもしれませんが、実際にテストをしてみないとわかりませんよね。コストの問題もありますが、効果をあげたいところではきっちりユーザビリティテストをしてみたいですね。
beBit社では他にもユーザビリティテストの結果をまとめて公開しています。こちらのブログもよろしければどうぞ。
知っている人にはとても有名なのですが・・・Yahoo!の米国サイトではYahoo!の「！」部分がクリッカブルになっています。
そこをクリックすると・・・なんと「Yahoo!」の発音の仕方を教えてくれます。
↑ ここをクリック。音声が流れますよ。
読み方がわかりづらいドメインだったら参考になりそうな手法ではありますね。
» Yahoo!
このブログはクラウド時代のレンタルサーバー、EX-SCALEによってホストされています。
