Webアプリ開発事始 第24回

WebサイトとWebアプリのデザインを考える(2) 長谷川裕行
有限会社 手國堂

どこに「戻ればいい」のか?

インターネット・サイトの場合は、前述のような単純な図式が描けません。ここでは「1つ前に開いていたページに戻る」というごく単純な操作の例で考えてみます。


- 戻り先は同じではない -

Webアプリケーションに限らず、通常は、トップページからリンクをたどって特定のページにたどり着くはずです。しかし、例えば、会員や登録者向けのメールマガジンでユーザーに対してWebへのアクセスを促した場合、ユーザーはそこに記載されたURLをダブルクリックして直接(トップページを介することなく)特定のページにたどり着くでしょう。また、検索サイトなどから直接やってくることもあります。この場合も、トップページを通過しません。

トップページ以外のページには、通常「戻る」ボタンを用意します。これをクリックすることで、ブラウザには「1つ前のページ」が表示されます。さて、ユーザーにとって「1つ前のページ」とはどこでしょう?

トップページからリンクをたどって(要するに、最もまっとうな順序で)やってきたユーザーにとっては(a)「同じサイト内の『このページへのリンク』が張ってあるページ」です。しかし、検索サイトからやってきたユーザーにとっては(b)「検索サイト内の『このページへのリンク』が張ってある検索結果のページ」となります。メールのURLをダブルクリックしたユーザーにとっては、そこではじめてブラウザが起動したのなら(c)「1つ前のページ」は存在しませんし、既にブラウザを起動していたなら、(d)「URLをダブルクリックする直前に『たまたま開いていた』ページ」ということになります。


- 異なる戻り先に対応させる -

多くの場合「戻る」ボタンにはHTMLの<A href=...>タグを使ったリンクが埋め込まれているはずです。その場合、これをクリックすれば必ず(a)「同じサイト内の『このページへのリンク』が張ってあるページ」に戻るでしょう(HTMLが正しく記述されていれば、ですが)。

しかしこれでは、先述したように異なる手段でアクセスしてきたユーザーには対応できません。そこで、「戻る」ボタンのリンクにonclickイベントを設定し、“history.back();”というJavaScript(historyオブジェクトのbackメソッド)を実行してブラウザの履歴にある「直前のページ」に戻らせることが考えられます。これは、ブラウザの「戻る」(←)ボタンをクリックした場合と同じ振る舞いとなります。

この方法なら、ユーザーが直前にどのページを表示していようが、どこから今のページに飛んでこようが、正しく元のページに戻れます。ただ、ユーザーがJavaScriptを実行しないよう設定していると、ボタンをクリックしても何の反応もない――という欠点があります。

このように、「直前に戻る」という動作1つを捉えても、いろいろと考慮しなければならないことがあります。


トップページ
Webアプリはサイトの一部
どこに「戻ればいい」のか?
戻り先は同じではない
異なる戻り先に対応させる
ユーザーを把握する
情報の分類
その他の注意点
あとがき

Copyright © GrapeCity inc. All rights reserved.