UI基礎構想:ミニマルな導線と動線

今流行のUIを用いた海外産のサイトを色々見て思ったことなのだが、

「見た目が新鮮で便利」と思う反面「動いて面倒」な面もあり、
無駄なUIを判断してどの程度削ぐかがポイントだと思う。
今回はそんなUIの削ぎ方について考えたことを記述していく。
 

最も使われるアンカーは何か?を調べる。

操作性の向上のため、ユーザーに無駄なスクロールをさせないよう
CSS の position: fixd などを利用してアンカーを固定表示して、
クリックさせたいアンカーをグローバルメニュー化にする。

スクロールで導線が消えれば、必然的にクリックカウントは下がる。
トップへ戻る、マイページへ移動する、サイト内を調べる。
最低限これらのアンカーが追従するだけでも、カウントは増加する。

▼css:ヘッダー固定
http://www.css-lecture.com/log/css/047.html
 

メニューから不要な項目を削る。

トップページへのアンカーをトップページに設置している
ページはアンカーがメニューの先頭についている場合が多く、
「不要なアンカーが最も目立つ場所にある。」という、
機能的に何をしたいのかがよく分からないものになっている。

トップページには「ここがトップページですよー!」と知らせる
キャプションやアイコンと、他のページへの導線があれば良いはずなので、
トップページに「トップページへのアンカー」を設置する意味がなければ、
これは削ってしまっても問題が起きない。

最も「ロゴをクリックするとトップページへ移動できる」という価値観が
スタンダードになっている今、サイトを利用するシェアによっては
メニューにトップページの項目を加える必要性も問われるだろう。
 

不要なキャプションを削る。

上記とは逆に。メニューがキャプションの役目を果たしている場合、
「商品詳細をみる」なんていうアンカーをクリックした先に
「この商品の詳細」なんていうキャンプションを丁寧に設置して
「2回も同じ事を伝える親切」なんていう導線を提供しているが

これらをユーザーが不要なものと感じている可能性があるなら、
キャプションの設置を再考する必要性がある。キャプションが無くても
内容が伝わるのならば、外してしまっても良いだろう。
 

不要なアンカーを削る。

グローバルメニューをスクロールに追従させてしまえば、
フッターに重複させて設置しているグローバルメニューは、
理由がない限り削ってかまわない。

▼jQuery:追従メニュー
http://kitchen.net-perspective.com/open-source/scroll-follow/
 

削れない要素は任意のカラムへ。

多くのサイトは左から右に向かってUIの重要性が下がる配置をしており、
・第1カラムやトップにナビゲーションを表示
・第2カラムにイメージやテキストを表示
・第3カラムに広告やバナーを表示
この構造はページUIを考える上での基本となっている。

広告やバナーなど外部のクライアントや提携者が絡む項目は
ナビゲーションとは違った必掲要素なので、考慮し配置を決める。
 

要素を動かすべきか、動かさないべきか。

jQueryなどで要素を動かすとユーザーの目を誘う効果が得られるが、
ユーザーの期待値に応えられなければストレスになる。
これを達成する為には、ユーザーに便利を与えられる動かし方と、
ユーザーが「動くと予期できる」jQueryの構成や説明が必要になる。
 

導線を伝達する。

導線を作っただけでは残念ながらユーザーを導いたとは言えない。
そこには絵や文章などの説明が必要で、できる事、できない事を
明示できなければ、作ったとしても部分的にしか使われない。

例えば色々な便利な機能を搭載している携帯電話も、
ユーザーがその機能を使っていなければ、全く意味のないものだ。
ユーザーが面倒と感じているか、存在そのものを知らないのか、
きちんと導線を伝達できれば、少なくとも後者はいなくなる。
 

言語化しない方法を考える。

グローバリゼーション。ノーマライゼーション。
これらの分野は、説明書ありきでの生産ばかりしている
日本人の最も苦手とするものだ。

例えば海外で道を尋ねる時、外国人がゆっくりと説明してくれても
その言葉が理解できなければ意味が無く、絵や地図で説明して
くれた方が容易に意思疎通ができる。

我々が海外サイトをそれ程苦なく利用できるのはこのような
「言語化しない」価値観のおかげで、リテラシーの変貌が激しい
我々が、我々に向けてサイトを作る時も同じ事が言えるだろう。

Categories: 02:Twit

Leave a Comment