はちど

ボードゲームのレビューなど。

*

駄目UIを見つけて考えたこと。

      2013/10/29

Hachiです。
安曇野に住むようになってもうすぐ2年。
たまの休みに松本に出て、なにか食べようと思ったときには「どんぐり」という洋食屋さんによく行きます。

これはこないだ食べたハンバーグドリア。

このお店はなんといっても1人前のボリュームがすごくて、おなかいっぱいになれる素敵なメニューが揃ってます。
ボリューム満点だからといって大味ではなく、それぞれのメニューがしっかり洋食屋さんの味なのも素敵です。
値段は他のお店よりちょっと高めですが、ボリュームを考えれば相応、味まで踏まえれば安いくらい。

雰囲気がよくてこぢんまりしているので、デートにもよさそうですね!そういう用途で使ったことないですが!
お昼時は満席になっていることもしばしば。でも回転率良いので思ったより待たされないのも印象良いです。
外食にはボリュームとコスパを何より重視する私でも、松屋やココイチよりはこっちを選んでしまいます。

閑話休題。
ここにひとつのblogのページャーがあります。

これは果たして使いやすいものでしょうか、使いづらいものでしょうか。答えは記事タイトル。

Webページデザインを考える上で避けて通れないものの1つに、UI設計があります。
UIとはUser Interfaceの略称で、Webページの「使いやすさ」や「わかりやすさ」を差します。
フォームの話をしたときにも書きましたが、今やWebは誰もが使うツールです。
なので、「使いやすさ」のハードルは低く設定する必要があり、それを設計するハードルは高くなる傾向にあります。
# UIとは別にUX(User eXperience、ユーザ体験)設計という考え方の方が今のトレンドですが、ひとまずここでは触れません。

大抵の場合、使いやすさと良いデザインは相反するように思います。
匠がリフォームしたデザイナーズ物件は使い方がわからない見た目重視の設計だらけ、ということは建築業界に限った話ではありません。
たとえばリンクひとつにしても、デザインを重視するあまり色を変えたりアンダーラインを消したりしたら、それをユーザがリンクとして判断してくれなくなってしまうこともあります。
# とか言いつつ、ここのリンクは色も変えてアンダーライン消してあるんですけどね。。
一般によく使われているWebサービスのリンクで、アンダーラインを消さずに青系統の色を使ってデフォルトに近い状態にしているのは、それが理由です。

また、タッチパネル搭載ガジェット上における表示についても、対応がめんどうな問題です。
Webページを表示する画面の大きさによって表示方法を変えて使いやすくしよう!という名目でレスポンシブWebデザインが流行ってきたと思ったら、
同じページに見えないので困るユーザがいるからPCと同じ表示に戻すボタンを置くべきだとか、
レスポンシブWebデザインはブームではなく可能性だとか、論議の的になっていたりします。

私は、UIは結局のところそれぞれのユーザの主観でしかないので、設計でも自分の主観を大切にすることにしています。
とはいえ、自分で作ったものを使う場合、自分はそのUIに対して予備知識ありまくりのプロなので、この考えでUI設計すると失敗するのも知ってます。
誰かが作ったUIを見て、良いものか悪いものかを主観で判断し、「なぜ良いのか」「なぜ悪いのか」を考えて蓄積し、それを自分のUI設計に反映させることが大事だと思っています。

いつも通りの回りくどい説明で失礼しました。
冒頭のページャーはとにかく使いづらかったのですが、
このUIが「なんで使いづらかったのか」を自分なりに分析してみたのが以下です。

で、改善案。
[ Prev 1 2 3 4 5 695 Next ]

  • PrevとNextは一番よく使うリンクだから、大きくわかりやすく。
  • 現在ページはリンクなし太字。特に変更なし。
  • 最初と最後のページは数字でページャー前後に挿入。1と95がそれ。
  • 10の倍数ページリンクはいらない。個人的に全く使う余地がない。

どう使って欲しいのかという設計者の意思とは関係なく、ユーザはそれを使います。
その結果、使いづらいとクレームが来たら、それはユーザがアホなのではなく、設計者が独りよがりなのです。
良いデザインを見ることでインスピレーションを働かせることは大事かもしれませんが、
そのインスピレーションによってユーザが置いて行かれるというのは、なんとも切ない話です。
たまには駄目なUIにも触れて、大いにイラついて、それを反面教師にするのも大事だな、と感じました。

sns-widget

更新情報の確認にはこちら!

 - Web技術 ,