Archive for the ‘ ナビゲーション ’ Category

マルチリンガルなインターフェースを実現する『Add Language』


questionformはAjaxを多用した小気味いいフォーム作成サービスである。

いろいろと参考になるインターフェースも多いのだが、おもしろいのはデフォルトで多言語対応のインターフェースを備えている点。

フォームを作成するときに「Add Language」なるボタンがあり、それをクリックすると言語切り替えボタンが付いてくれるのだ。またフォームのラベルも言語ごとに設定してくれる。

「Add Language」ボタンをクリックすると・・・

questionform1.gif

以下のようなウィンドウが出てきて・・・

questionform2.gif

スペイン語対応!

questionform3.gif

↓ 以下はデモ(このように作ったフォームをiFrameで貼り付けられる模様、なるほど・・・)。

言語の壁があるにはあるが、世界へ向けてサービスを提供する敷居はどんどん低くなっている(システム的に)。実際海外のWeb2.0系サービスやブログで、日本語対応をしているものもどんどん出始めている。

こうした「Add Language」ボタンが増えてくると日本のサービスも変わらざるを得ないかもしれませんね。ことウェブを使ったサービスに関しては、目指すべきは世界、なのかもしれません(全部じゃないだろうけど)。

QuestionFormは参考になるインターフェースが満載なのでまた取り上げてみたい。今回はこんなところで・・・。

» questionform

関連エントリーの自動表示でブログ記事をリッチに


ブログの記事に関連エントリーを載せるのは重要だ。

コンテンツをリッチにしてくれて、読み手の滞在時間を長くすることができるからだ。

でも、いちいち手作業でアップするのはめんどうである。

そこでNiall Kennedy’s Weblogのやり方をまねてみるのはどうだろう。

related_blogs.gif

» Niall Kennedy’s Weblog

これはSphereというサービスを使っているようだ。

このサービスを使うと自分のブログやニュースサイトから関連記事を自動で検索して表示してくれる。

日本でもこういうサービスができたらいいなー。

学習させるインターフェース


ショートカットキーは便利だ。

でもヘルプを見て確認するのは面倒くさい。

なのでHelipadはいい。

このサイトはWEB上のメモ帳なのだが、検索のショートカットキーが検索フォームに表示されている。

stufy_interface1.gif

↑ 検索フォームにショートカットキーを表示。検索時にはもちろん消える。

効率的な使い方を学びながら作業できるようになるというわけである。

ちょっとした仕掛けですが、自然とユーザーのレベルをあげてくれる小粋なインターフェースとして覚えておいてもいいかもですね。

いつでもブックマークしてもらえるインターフェース


ソーシャルブックマーク数がサイトの評価指標の一つになっている。

ただ、読み手がどのタイミングでブックマークしてくれるかは、わからないものだ。ブックマークしたいときにできないと、機会損失となってしまう。

そこで、weeblyみたいなインターフェースはどうだろう。

このサイトではdel.icio.usやDiggなどにブックマークするためのアイコンが、画面をスクロールしても、常に右下に表示されるようになっている。

061108weebly4.jpg

↑ こんな感じに右下にアイコンが並ぶ

061108weebly5.jpg

↑ スクロールしても常に右下に表示される。

使われ方によっては、うざったく感じることもあるインターフェースだが、ブックマークのように、読み手が便利になるような使い方は他にも考えられそうですね。

このページの先頭へ、をちょこっとおしゃれに


ブログでもサイトでもよく見る「このページの先頭へ」のリンク。長~いページだとそのリンクで一瞬に先頭に行ってしまい、読んでいる人が混乱することもよくあります。

そこでご紹介したいのが「するするるーーー」と先頭まで戻ってくれるJavascript。このブログでも導入してありますので是非体験してみてください。

tothetop.gif

↑ ページの下の方でこの「↑」を押すとするすると上まで戻ります。

導入方法は簡単でJavascriptを導入し、「このページの先頭へ」リンクにonClickイベントを仕込むだけです。

仕込むJavascriptはこちら。ちなみに元ネタは「A (slightly) better technique for “Back to Top” links.」です。ページ内に書き込んでも、外部ファイルにしてもいいでしょう。

function backToTop() {
var x1 = x2 = x3 = 0;
var y1 = y2 = y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
x3 = window.scrollX || 0;
y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
if (x > 0 || y > 0) {
window.setTimeout("backToTop()", 25);
}
}

「このページの先頭へ」に仕込むリンクはこちら。

<a href="#" onclick="backToTop(); return false">このページの先頭へ</a>

人によっては「Home」ボタンで戻る人もいるでしょうが、こういう気持ちよいギミックはさりげなく使っておきたいですね。