WebサイトのUI設計といえばディレクターとデザイナーのタッグで生まれることが多いでしょう。
そしてコーディングが終わり、いざ使用してみると、「あれ？ ここ使いにくい」、「ここにこんな機能が埋め込まれていたの？」と驚くことがしばしばありませんか？
そんなちょっと残念なUIをすてきなUIにするにはどうしたらいいのか。
具体例を見ながら考えていきましょう。
■ヘッダーとフッター邪魔なんですけど…。
ヘッダーやフッターを固定して画面上に常に表示させる手法がよく使われています。しかし、なんでもかんでも固定すればよいというものではありません。
その固定されたヘッダー、フッターが分厚かったらどうでしょうか。ヘッダー、フッターが画面の面積を占有し、コンテンツが少ししか表示されません。これでは肝心の見てほしいところが見てもらえませんね。
仮に200pxのヘッダーを固定したとしましょう。22インチのデスクトップ用モニタなどではヘッダーはさほど気にならないと思います。しかし、モニタの小さなノートパソコンではどうでしょうか。200pxのヘッダーはノートパソコンの画面の1/3程を占有するのではないでしょうか。これではさすがにコンテンツが見づらいですね。
ではこのようなケースはどう修正したらよいのでしょうか。
選択肢１：ヘッダーの固定化をやめる
選択肢２：ヘッダーの大きさを小さくする
選択肢１は制作現場でよく取られる手法ですね。ヘッダーの形は変えたくないので、ヘッダーの固定化をあきらめて、画面を広く使います。
選択肢２には大きく分けて２つのやり方があると筆者は考えています。
一つはヘッダー幅はそのままに、ヘッダーの高さを小さくする方法です。ヘッダーの高さを50pxほどにすればノートパソコンの画面で見た時も、スマートフォンで見た時も、ヘッダーが画面を占有している、と感じることはないのではないでしょうか。
もう一つは、ページを開いたときは高さ200pxのヘッダーを表示しますが、スクロールした時にjQueryなどを使って、より小さいヘッダーを表示させるようにする方法です（スティッキーヘッダー）。
例えばスクロールした時に幅画面の50%、高さ50pxのヘッダーを画面右寄せに表示します。
これでだいぶヘッダーが目立たず、コンテンツが見やすくなりました。
ヘッダーサイズはそこに詰め込む機能にも左右されます。どのような機能をヘッダーに持たせるかを十分に吟味する必要がありそうです。
フッターも同様の考え方で考えてみてください。
■ここはクリックすべきところ？ 視認性の悪さは命取り
フラットデザイン流行時の弊害として、どこをクリックすべきなのかがわかりづらい、というものがありました。
ユーザーはそれまでの経験をもとにUIの機能を推測します。アンダーラインがついている文字列にはリンクが張ってある、というのは良い慣例かと思います。
フラットデザインでは、ユーザーがそれまでに蓄えた経験値では探しえないUIを実装してしまったため、上記のような弊害が出たと考えられます。
この問題を一言で片づけるならば、UIの視認性の悪さとでもいうのでしょうか。
これからも新しいデザインスタイルが出るたびにこのような現象は起きるでしょう。かといってデザインが変わるたびにユーザーに0からの学習を強いるのは、不親切です。
この難しい問題を解決する方法はあるのでしょうか。
筆者は以下の方法が有効であると考えます。
思わず触ってみたくなるデザインにする。
単純ですよね。
しかしこれを実現するとなると、なかなか難しいのです。
例えば寒色系で統一していたパネルの中に暖色系のパネルを置く。暖色系のパネルの中の文字はリンクであることを明示する文体にする、もしくはボールド体にするなど工夫して、ユーザーの目を引くようにします。
思い切って統一されたデザインの中に異なるデザインを置くというのも効果的です。
例えばフラットデザインの中に立体的なボタンをおいてみるというのはどうでしょうか。
ユーザーはデザイン性が大きく違うオブジェクトになんだこれは！？ と思うでしょう。また、今回の例では中央に配置してオブジェクトを目立たせています。ここにボタンであることを示すようなテキストが入れば確実に押してもらえるでしょう。
またマウスホバー時に色が変わる、などといったホバーエフェクトを追加するのも、パソコン向けサイトでは大変良い効果を生むと考えます。
新しいデザインのどこかに、ユーザーがこれまで学習してきた要素を取り入れると、ユーザーのボタンへの認識がぐんと高まります。
ユーザーがどこに注目してクリックするか、ということについては、こちらのサイトで面白い実験をされていました。
http://www.webcreatorbox.com/webinfo/kids-usability/
こちらのサイトでは子供がインターネットを使用するときのユーザビリティ調査（簡単なもの）をおこなっているのですが、こどもは「かわいい」ボタンよりも「押せそうな」ボタンを押すとの結果が出ていました。必要以上にUIをデコレートするよりも確実に押せそうだ、どこかにつながっている、と思ってもらうことが大事ですね。
こういったユーザーの心理をよく研究し、実装しているのは実は怪しげなポップアップ広告だったりします。誰しも一度は押しかけたことがあるのではないでしょうか。近年ではユーザー自身が学んでこのポップアップは怪しい、と判断できるようになりつつあります。
一部のポップアップ広告は巧みな文章と、確実に押せそうなボタンの組み合わせでユーザーをクリックするという動作に導きます。思わぬところに良いUI例があったものです。
■タップしているのに反応しないボタン
スマートフォンでよく見られるこの現象。モバイルファーストがグローバルスタンダードになったこの社会において、これは致命的なUIの欠陥です。
理由は明白です。リンク範囲の指定が狭いことが原因なのです。これはコーディング段階で生じることが多い欠陥です。
まず、スマートフォンは人の指を使います。その指の大きさを考慮してUI設計をすることは、基本中の基本です。
では悪いUI設計の例を見てみましょう。
上記のようなボタンがあったとします。指の太さはリンク範囲の黄色枠幅と同じくらいだったとしましょう。このボタンの中央黄色の個所をタップした時にはリンク先に飛べます。しかし、黄色リンク範囲外の緑の部分をタップした時には、リンク先に飛べません。
これではよいUIとは言えません。
この場合、リンク範囲の幅、高さを緑色のボタンいっぱいに広げることで、ユーザビリティが向上します。
リンク範囲の設定は主としてコーダーが行います。コーダーもこのようなUIに関する知識を持っていなければなりません。
以上、最近出会った使いにくいUI３選でした。
よいUIを作りあげるには、２Dデザインの巧みさだけではなく、人間心理にも精通していなければなりません。そしてそれらはデザイナーだけではなく、コーダー、ディレクターも持っているべきスキルであると考えます。
ますますデバイスの多様化が進む今後、UI設計の重要性は増していきます。
予習をしっかりして制作に臨みたいものです。
- 3763 views
- キム
