Webデザインで気づく細いところ考察【3/5】

さてと、連載途中で『Google Web Designerの記事』を書いてしまったから、記事描くモチベーションカラーが若干変更されてしまい、軌道修正に2日ほどかかったね。うん。

こういうの俺の弱点なのかな。途中で路線変更すると、前やってたことが、割りとどうでも良くなってしまう癖があるんだよね。
まぁ大きな損害になるほどの弱点でもないと思うし、治すほうがコストパフォーマンス悪いとおもうので、このまま生きますけどね。うん。

というわけで、気を取り直して続けるよ。だから大丈夫だしもう大丈夫でみんな大安心だ。

今回は何をテーマにするかというと、『アクションはっきりさせようぜ！』だ。とにかくここ最近、『何をさせたいのかよくわからないUI』ってのが多い気がする。

例えばすごく可愛い外人の女の子だとおもって名前とか調べてみるとさ、なんと実は男だったとかって事があったんだよ。もうね、怒りを覚えたね。
俺、モーホーかよ！と。とにかくいろいろはっきりせい！と。

もしかしたらそう思ってるのって俺だけなのかもしれないけど、機能やプログラムの仕組みなどの観点からすると、『おや？』と思うものや、デザインとしても『うぉぉ！こう来るのか！』や『えぇ～～～！！！なんで！？』ってのが、案外目立つ今日このごろ。

そこら辺を、俺が気づいた範囲で、実例を元にいろいろ紹介できればと思う。

ホバーかクリックかはっきりさせる

Google+というSNSがあるんだけど、なんというか、仕様変更が激しいんだよね。
しかもGoogleのポリシーなのかしらんけど、事前告知とか全くないわけ。

ある日突然UIとかUXがガラっと変わってさ、当日から不具合とかバリバリ出てるんだけど、なーんも対応してくれない感じ。極めて残念。

いちいち大騒ぎになる。

最近は落ち着いてきてはいるんだけど、たまにエンバグというかデグレとか、以前は直ってた不具合がまた出たりしてて、なんだろなぁ、どういう開発体制なんだろうか、と思わせる、やたら人間臭い運用をしてるわけ。

で、どういうつもりなのか全く不明なんだけど、明らかにこれはおかしいだろうっていうデザインとかがポロポロと見え隠れするんだよね。

例えばこれ。どう見てもクリックするボタンとしか思えなんだけど、クリックできない。

そもそも下向きシェブロンがついてるのに左側から開くってのも、アイコンとしておかしいわけで、どういうつもりでこう言うデザインになったのか、アートディレクターを問い詰めてみたい。
まぁそういう立場の人がいれば、だけど。

それにボーダーでボックスを強調し、さらにシャドウもかけてる状態でもある。立体的ってことね。
どう考えてもクリックしようって思うでしょ、常識的に。

ちなみに画面をスクロールするとちょっとしたアニメーションでトランジションするんだけど、小さくなるだけというか、あんまりこれ意味が無いよね、と思う。検索窓も消えちゃうし。

もしかしたらスマートフォンとかで対応させるためにこうなってるのかな？って思った。
でもスマートフォン版のアプリとかは全然違う作りなので、そうではないと思う。

画面の反対側には『ハングアウト』という、簡単に言うとビデオチャットができる仕組みがあるんだけど、まずは動画を見てもらいたい。

ホームボタンがマウスオーバーでのインタラクションなら、こちらも同じにしておけばいいと思うんだけど、コッチはクリックでしか開かない。

そしてエリア外にマウス載せても閉じない。クリックしても閉じない。なんと、『ハングアウト』と書かれた部分をクリックしないと閉じないとう、なんというUIだろうか！！！

これは正直統一性がなく、知らないと分からないという作りになっている。
まぁしばらくいじっていればだれもがわかるUIではあると思うんだけど、統一性のなさすぎる点という意味で、気持ちが悪い。そして説明が面倒になる。

ちなみにハングアウトを表示すると画面の下まで表示されるんだけど、一番下には別のメニューがあり、こちらはマウスオーバーでのインタラクションとなる。

アイコンは下向きシェブロンだ。マウスオーバーで上向きシェブロンに変わるんだけど、これ、逆じゃないの？って思う。

『ハングアウトパーティ』という文字にアイコンを乗せると上にスライドするので、最初が上向きシェブロン、そして開いた後、マウスのエリア外で閉じるので、下向きシェブロンになっているのが適切なんじゃないのかな。

どういうつもりで逆になってるのかわからないけど、単純に日本人と外人の感覚の違いなのかな。
俺にはよくわからん。

ちなみに同じGoogle関連のYouTubeもかなりおかしい事になってる。『ガイド』というアイコンが、メニューをクリックすると消えてしまうのだ。

YouTubeって『動画を見る』モードと、『動画を管理する』モードに分かれてると思うんだけど、同じ内容のメニューのくせにインタラクションが違うという。なんだか気持ち悪い。どっちかに統一してほしいね。

それから余談だけど、意味がわからないのが、HTMLのtitleとかalt要素の使い方。この動画でもちらちら表示されては消えるなんて儚い感じだけど、そもそもすでに表示されてるテキストと同じ内容がツールチップで表示される意味が不明なんだよね。
はっきりいって邪魔でしかないので、俺はHTMLでimgタグとかにはaltは空にしてる。titleなんか使わない。ツールチップが必要ならjQueryなどのカスタマイズ可能なオリジナルのツールチップを付けば良い話で、ブラウザ実装のツールチップは本当に邪魔すぎてイライラして、そばにある何かを破壊したくなる衝動に駆られるんだ。
正直いってこれはW3Cの仕様がどうたら言うのではなくて、ブラウザが悪いと思ってる。

俺ならこうする

まずマウスオーバーでインタラクションさせるなら、『ホーム』や『ハングアウト』の部分は背景色を変えるね。マウスが反応するエリア目いっぱいに背景色を変えるよ。

クリックでインタラクションさせるならボタンデザインでいいと思う。大きめにね。
それからボタンデザインにしないのであれば、最初はアイコン＋テキストのみ表示させておき、マウスオーバーするとボーダーが表示されるような、いわゆるツールメニュータイプでもいいと思う。

あとシェブロンは、コンテンツが出てくる方向を向かせるべきなんだと思うんだよな。だからやっぱり下から上にでるなら上向き、下に引っ込むなら下向きが正しいと思う。

リンクリストの見せ方をはっきりさせる

そもそもWebサイト、ホームページというのはハイパーリンクが醍醐味なわけで、そう考えると目立たないリンクって、すごく本末転倒だよね、とは思うんだよね。

よくあるテキストリンクだけど、ヘッダ、コンテンツ、フッタで色を変えてたりするのはわかる。だけど、コンテンツの中でテキストリンクの色が他の色とダブってたりすると、クリックできるのかできないのかがわからない時がある。

更に酷いのは、10年くらい前に流行りまくった、マウスカーソルを変更するページだ。
defaultがcrosshairになってたり、リンクが十字になってたり、中二病こじらせたようなCSSの設定だ。これは今の時代にはちょっとまずい。ショボすぎるから即刻辞めたほうが良い。

テキストリンクにマウスを乗せたらpointerのマウスカーソルになるのは言うなれば極めてスタンダードであり、それを変更するということは、リンクできるのかどうかを一瞬とどまらせてしまうことにもなる。そうなると、ハイパーリンクが醍醐味であるはずのHTMLで作られたWenサイト、ホームページなどの魅力も半減してしまうのではないか、と思う。

テキストリンクは、すごく大事だ。

例えば左の画像、某写真素材サイトのテキストリンクのキャプチャだ。これはリストになってる。

各カテゴリの横にカッコがついていて、その中に現在、何枚の写真が登録されているのか、というのが一目でわかるようになっている。

そしてテキストにはアンダーラインが引いてあるのもすごく良い。ひと目でテキストリンクだということがわかる。

2点残念なところは、マウスオーバーでアンダーラインが外れてしまうところと、ツールチップが表示されてしまうところだろうか。

カッコはリンクに含まれていないんだけど、マウスオーバーでアンダーラインが消えてしまうので、リンクの範囲が不明瞭になる。どうぜならカッコもリンクに含ませてしまったほうが良いともう。

あとはマウスオーバー時に色を変えるなどすればいいのではないか、と。

それからこれは最悪のパターンだ。左の画像を見てもらえるとわかるんだけど、テキストリンクのリストアイテムにマーカーが付いているのはわかるが、マーカーが縦方向にセンタリングされていて、どこからどこまでが1つのリスト項目なのかがわからない。

マウスオーバーでリンクの色が変わるので多少は範囲がわかるのだが、そもそもこのパターンはとにかく見難いし醜い。醜悪だ。

マウスオーバーして調べたところ、右のようなリンクになっていることが分かった。リンクの区切り目は赤い線を書いてある。

まぁこの手のかわいそうなミスはHTMLやCSSを構築する作業に縁もゆかりもない人がやってしまいがちなんだろうけど、はっきりいって恥ずかしいので、気づいた人が直してあげるのが良いと思う。例え別の部署だとしても。

これらと比べるのは少々気がひけるけど、MdNのリンクみたいにするとわかり易い。大して実装も難しくないので、的確なマージン、パディング、色をつかって実装してもらいたいもんだね。

マーカーの種類をはっきりさせる

最近は画像ではなくCSSをつかってAタグを加工し、CSS3で追加された各種機能で綺麗なボタンを作ったりしてる人も多いと思う。こういったテキストの基本的なリンクの見せ方などはしっかりチェックしてもらいたいと思うんだよね。

画像は画像で良さがあるので、テキストの魅せ方に難儀してるようなら、素直に画像を使ってしまったほうが良い場合もあるよ。

上の画像ではアローがテキストの右側に、右を向いてる。そしてテキスト自体は画像の中心においてあるので、アローがかなり右側になってしまっている。

『新規登録』と『▶』を合わせた長さでセンタリングする必要はないけど、あまりにも右に寄り過ぎた。
『新規登録』と『▶』の間をもう少し狭め、全体を左側に少しずらすと重心が安定すると思う。

画像の場合は修正が面倒だろうけど、テキストの場合は簡単だ。ソースコードを直せばいい。

このテキストリンクは『編集する』という『アクション』を表しているのにもかかわらず、何故かマーカーが左側に設置されている。そう、リストマーカーのようだ。

『編集する』はその内容から、上記画像リンクの『新規登録』的なアクションであるので、右にあるのが良いと思う。そのほうがリードマーカーとしては適切なんじゃないかと。

マーカーが左側にあると、箇条書きのアイテムになってしまう。個人的には違和感を覚えるよ。

ダイナミックなのかスタティックなのかはっきりさせる

これはアメーバのリンクなだけど、リストマーカーがついてるのでリストになってるのがわかると思う。

が、このマーカーが微妙すぎるんだよね。クリックしたら下を向いて新たなメニューが表示されてもおかしくない見せ方になってる。

実際にはこのマーカーは、ただのリストマーカーだ。クリックしてもクルっと回るわけでもなく、新たにメニューが出るわけでもない。

それにこれは場所によってはトピックパスに見えてしまうかもしれない。

『トピックパス』の事を『パンくずリスト』っていう人が圧倒的に多いけど、『ヘンゼルとグレーテルのパンくず』を元にしているのであれば、もうなんていうかナンセンス極まりない。笑ってしまう。おかしすぎてる。
なにしろ『パンくずリスト』なのであれば、スタート地点から『通った順に表示すべき』だ。なぜならパンくずはこの場合『ページを見た履歴』なのだから。
そうではなくて、ページ遷移があるたびにスタート地点から今の場所を表示するなら、それはトピックパスでしかない。俺は『パンくずリスト』って言いながら履歴じゃない機能はインチキだと思ってる。大いなる勘違いだ。だからできればみんな『パンくずリスト』ではなく『トピックパス』と言ってもらいたいなぁ。

いずれにせよページの上の方に、あまり数の変化がないメニューを固定的に置くのであれば、タブのような見せ方をしてもらいたいたいもんだ。

この左のメニューはYouTubeのダッシュボードのメニューなんだけど、こちらはメニューが展開するパターンだ。

しかし展開すると言ってもダイナミックに展開するわけではなく、URLがしっかり遷移する。ただ開いた状態のページに移動するだけだ。

このメニューの何が悪いかというと、リストマーカーとテキストリンクの範囲がわかれているようなデザインをしているのに、結局両方とも同じ挙動をするところだ。

右の画像を診てもらうと、ちょっとわかりにくいかもしれないけど、リストマーカーにマウスを載せても、テキストの背景色みたいに変化がしない。別のリンクのように見える。

はっきりいってこれは手抜きなのでは？と思うんだよね。
YouTubeの『見るモード』と『管理するモード』で著しくデザインにおける比重が違うのは、なんでなんだろうか。

明らかにこれはミス。故事的にはそう思って仕方がない。

これはわかりやすいな！と思うのが、意外に思うかもしれないけど、Wikipediaだ。