来訪者有用性最適化、ユーザビリティの向上

スクリプト系は本職ではないのだけど、動的なリッチなサイトも作れないとね。
とはいえ、無駄にやっても仕方がないので、やはりここはユーザーの役に立つものを。

どうやって作るか。
JavaScriptのライブラリも今は使いやすいものが豊富なので、それらを使うことに。

始めてPCに触れた小学生の頃はBASICとかで遊んでたし、VBでプログラマやったことも多少はあるし、出来なくはないだろう。
JavaScriptもPerlもかじったことはあるし。

使用するライブラリはまずは有名なのに使用ということで「Prototype」と「dojo」を候補に。
いじった結果「dojo」のほうが個人的に使いやすそうなのでこっちに決定。

てことで、訪れた人ごとに画面のレイアウトを変更するって感じのものの作成。


検索エンジンで検索して訪れた人の検索結果ごとに画面を最適化するといった感じで作れればいいかなと。
VisitorsUsabilityOptimization/VUOとでも名付けますか。

といっても現段階ではそんなたいそうなものではないですが。

ページ内にあるいくつかのコンテンツのブロックを、訪れた人の検索してきたキーワードによって、表示位置を入れ替えようというもの。

通常のコンテンツブロックの配置が
———-
「Key1」
「Key2」
「Key3」
———-
というレイアウトだとして、

「Key3」というキーワードで検索してサイトを訪れた人には
———-
「Key3」
「Key1」
「Key2」
———-
というレイアウトに自動的にして表示するというもの。

実際にやったことの概要は

1.document.referrerでリファラ情報取得して、その中から検索キーワード抽出。

2.dojoのdojo.place関数でDOM操作

たったこれだけの簡単なもの。
スクリプト得意な人ならすぐでしょう。
あとはCSSも切り替えることも可能くらいか。

せっかく覚えたdojoなのでちょっとした解説を。

dojoのDOM操作のメインは

dojo.place(node, refNode, position)

という今回使用した関数。

refNodeからの相対的なpositionにnodeを挿入できるというもの。

DOMオブジェクトかIDで要素は指定できる。
positionは数値か文字列で指定可能。

数値ではrefNodeの指定した数値の位置にnodeを挿入。

文字列は
before : refNodeの手前に挿入する
after : refNodeの後に挿入する
first : refNodeの一番最初の子要素として挿入
last : refNodeの一番最後の子要素として挿入
といった指定の仕方。

以上おさらいでした。

さて、たいしたことしたわけではないけど、今後もこういったユーザビリティに関することは考えていきたいな。
もちろん訪れた人だけでなくサイト運営者にとっても、来訪者の見たい情報が見やすい位置にくるというのは良い効果が期待できるだろう。
今回の仕組み以外にもいろいろと考えたい。
スクリプトが得意じゃないといっても、やはり役に立つサイト作り目指すからには、多少なりとも知らないとだ。

てことで、細々とVUOプロジェクト進めていきます。
アイデアや情報、何かあったらお待ちしています。

関連しているかもしれない記事

コメントを残す

メールアドレスが公開されることはありません。