今回は、マウスオーバーなどで表示される『フロート』に関していろいろ考察してみたいと思うんだよね。
フロートってのはまぁ、要するに『浮いてる』って意味になる。
コーラフロート、オレンジフロート、抹茶フロートなんかは、アイスやクリームなどが浮いてるのでフロートっていうんだけど、これを書いてる今、無性にスターバックスに行きたくなったのは言うまでもない。
ちなみにスターバックスで一番好きな飲み物は『チャイラテ』なんだけど、一番大きなヴェンティというサイズで頼んでる。
ヴェンティだとちょうど500円なので、ワンコインで買えるからわかりやすいよね。そしてわかりやすいというのはすごく大事だね。うん。
で、レシートを見ると『アイスヴェンティチャイラテ』と書いてある。ホットかアイスかが先に書いてあり、、その後サイズを表す単語が書いてあるので、いつもこの並びで注文してるからちょっと気持が良い。
スターバックスはそういうのを狙ってるんだろうけどね。こういった気持よさ。
あ、そうそう、抹茶も大好きだよ。抹茶ラテとかも大好き。カロリーがべらぼうに高いらしいけど。
フロートとは
HTMLでいうフロートは、フロートするエレメントを主役として考えた場合、その他の要素が自分の周りに回りこんでくれるというものだ。例えばこの記事の一番最初の画像、テキストが右側に流し込まれていて、画像がなくなると勝手に行頭から表示してくれてる。これはフロートになる。
現にCSSでも『float』という要素があり、自分をどちら側に寄せるのかを指定すると、このように流し込みが可能になるんだよね。
自分を左に寄せたフロートがしたい場合、
float: left;と記述すればOK。
ただし自動的に復帰される前に更にフロートすると入れ子になってしまうので、復帰させたい場合は明示的に
clear: left;や
clear: both;などで指定しないといけない。ここらへんは多少厄介だと思った人も多いはず。
初期設定では縦並びのリストなどを横並びにしてタブっぽくする場合なんかも、全ての要素を左寄せにして横並びにさせるテクニックなど、かなりの常套手段として使われてるんだよね。
さて、こういったフロートをここでは便宜的に『構造的フロート』と呼ぶことにする。ようするに、文章が流し込まれるような画像のレイアウトというような感じだ。
構造的フロート
それとは別に、例えばグローバルナビの一つのメニューをマウスオーバーした際に表示されるサブメニューなど、何らかのユーザアクションによって、他の要素の上に乗るような、それでいて他の要素のレイアウトを崩さないものを、『視覚的フロート』と読んでみることにする。
視覚的フロート（ツールチップが邪魔だなぁ）
前者は『流し込み』という意味でのフロートであり、後者は『重なる』や『浮いてる』という意味でフロートと呼びたいんだけど、両方ともフロートっていうと混乱すると思い、あえてこれらの見せ方に別名をつけてみた。
あくまでここでの説明をするために勝手につけた名前なので、そのままお外で使うと、周りの人たちにおかしな目で見られる可能性もあるかもしれないので、そこら辺は予め注意しておいてほしい。
もしくはすでに、こういったフロートの分類がされてる単語とかがあって、俺が知らないだけなのかな？
では早速、この後者の視覚的フロートに関する考察をしてみようと思う。
視覚的フロートの開き方
ここではYouTubeを見てみようと思う。YouTubeのフッターには4つのシェブロン付きボタンが表示されてるんだけど、これらがどういった動きをするのか、だ。
左から『言語』、『国』、『セーフモード』、そして『ヘルプ』となっている。ヘルプだけシェブロンがうえを向いているのがわかると思う。
実際にこれらのボタンをクリックしてみた動画がこちら。
なるほど少々変わった動きをするようだ。
というのも、左の3つのボタンは現在見ているページの下方向へのコンテンツを拡張している。そして拡張自体がアニメーションしないので、一瞬何が起こったのかがわかりにくい。
今回ページを表示して最初にボタンをクリックしたので、拡張後に自動的にページの最下段へ瞬時に移動するギミックがウドいたけど、これら、一度でも表示したあとであれば、自動スクロールはしないようだ。
つまり、1回めに『なんだ、これ？』ってなって、2回目をクリックした場合、拡張された事自体に気が付かない可能性がある、ということになるので、良い見せ方ではないなぁ、と思うんだよね。
まぁこれらは厳密にいうと視覚的フロートじゃないので、あんまり細かいところは突っ込まず、本題に行こう。
ここでの本題は『ヘルプ』だ。
動画を見てもらえればわかると思うけど、なんと『ヘルプ』はフロートなんだけど、ダイアログに近いフロートなのである。
左にある3つボタンとは大きく違う。この見せ方ってどうなんだろう？と。
他の３つとは違い、ボタンクリックで表示するのみ。トグルになってないのでもう一度クリックしても閉じるわけではない。
そしてフロートしたエレメントをドラッグすることができる。そして右上には閉じるボタン。
うぅむ、なんだろうか。
ダイアログなら背景をオーバーレイして見せるとかのやり方があるだろうけど、この場合はモーダレス（ダイアログの操作が終わらなくても親要素の操作が可能）なものだと思うので、それもできない。
そして実際に中身のリンク先を表示してみると、こんな感じになる。
このダイアログはリサイズが不可能なので、はっきりいって邪魔でしか無い。
俺はいったいGoogleのUIデザイナが何を考えてるのかが、よくわからない。
単純に別ウィンドウや別タブでヘルプ開けばいいのでは？と思う。
なにしろこのダイアログ、想定通り、別のページに行くと消えてるわけだし。
視覚的フロートの閉じ方
さて、これらの視覚的フロートはエレメントの上に重なるわけなので、閉じなければならない。閉じなければ一部のコンテンツが隠れてしまうからだ。その閉じ方にもいろいろあるんだけど、まずはGoogle+を見てみようと思う。
※動画キャプチャで使ってるソフトがアップデートしたので、この動画からクリックすると赤丸が表示される様になったよ！！
こちらはメインメニュー。マウスオーバーで開き、マウスアウトで閉じるので、開きっぱなしではなく、例えるなら冷凍庫の蓋を開けてアイスを取り出すような感覚だ。
アイスを取り出したら冷凍庫の蓋はすぐに占めなければならない。そういうのを自動でやろうとしてるんだろうけど、マウス操作がおぼつかない人にとっては、チラチラとでたり引っ込んだりして、イライラする原因になってると思うんだよね。
個人的にはこういう自動で閉じるのはただのノージーな実装だと思う。
ノージー（nosy：おせっかい）ね。
DON'T IMPLEMENTS
NOSY BEHAVIOUR!!!
そしてこちらはナビメニュー。
こちらはマウスクリックでフロートし、マウスアウトしても閉じない。再度クリックしたりエリア外をクリックすると閉じるという、優れたタイプ。こういうのはわかりやすいよね。
特にグローバルナビなんかでサブメニューがある場合、サブメニューにマウスカーソル持って行く途中にマウスアウトしてメニューが全部閉じる、なんてダサすぎる挙動をするメニューがよくあるんだけど、そういうのは絶対にNGだと思うんだよね。
マウスを一方向だけに動かして貰う場合はそうでもないと思うんだけど、縦横に動かす必要がある場合、マウスアウトで不トーロが閉じてしまうってのは、非常にストレスが貯まる仕組みだ。
だからこういったグローバルメニュー、グローバルナビ的なフロートは、クリックで開き、クリックで閉じるというのが優れていると思う。
それからこれはGoogle+の通知領域と、Chromeのアプリアイコンだ。
みんなの声を聞いてる限り、これらのボタンの挙動は極めて悪質な実装がされてるのがわかると思う。そして俺もそう思う。
この実装はちょっと、頭がどうにかしてしまったのか？と思わせる良い例かもしれない。
まずはChromeのアプリボタン絡みてみよう。
- アプリアイコンクリックで開く
- マウスホイールでスクロールが可能
- アプリアイコンを再度クリックすると閉じる
- フロート領域外クリックでも閉じる
- フロート領域外でホイールスクロールすると瞬時に閉じてしまう！
なんということでしょう！！領域外でホイールを動かすと閉じてしまう！！！これではマウスポインタを必ず領域内にキープしておかないといけないではないか！！プギャ！！
ただ、Chromeのアプリボタンならまだ良い。次はGoogle+の通知領域を見てみよう。
- ベルアイコンクリックで開く
- マウスホイールでスクロールが可能（動画ではスクロールバードラッグ）
- ベルアイコンを再度クリックすると閉じる
- フロートの領域外クリックでも閉じる
- フロート領域外でホイールスクロールすると瞬時に閉じてしまう！
あれ？Chromeのアプリボタンと同じじゃん？って思った人、実は用途が違うのだ！！
Google+の通知領域は、コメントされたポストがリスト化されるんだけど、なんと通知領域内でこちらからコメント返しもできるようになってるんだよね。これはかなり便利なんだけど、コメント書いてる最中に、領域外で少しでもマウスホイールが動くと、とたんに閉じてしまうのだ！！
コメント書いてる途中なのにお構いなしに閉じる。無慈悲。
マウスポインタ動かさなければいいじゃん！って思うかもしれないけど、メンションなどで特定のユーザの名前が書いてあったり、すでに表示されてるコメントくれた人のアイコンとかにマウスポインタが乗ってる場合、かなり大きなプロフィール情報がフロートされてしまい、コメント欄が見えなくなるので、マウスポインタはどかしておく必要があるわけだ。
で、どかした先が領域外で、その状態で少しでもホイール動かすと、途端に通知領域のフロート全部が非表示になる。これは恐ろしい！！
もちろんもう一度フロートを表示させれば書き込み途中のテキストは消えないで残っているんだけど、ただでさえややこしい仕組みなので別タブを開いて操作している人も多いはず。さらにGoogle+だけではなくGmailやBloggerなどでも共通の通知領域なので、ブラウザのタブで沢山GOogle関連開いている人からすると、どこでコメントかいていたのかわからなくなってしまうこともある。実際に俺がそうだったりする。
なので、コメントが３つくらいまでならいいけど、５個以上付いているような場合、通知領域の日付をクリックしてそのポストのみの専用ページを開き、そこでじっくりコメントを返すようにしている。
便利なんだか不便なんだかよくわからない本末転倒な結果担っているが、そもそも領域外でスクロールしても閉じないようにすればOK。ただそれだけでOKなのに、それがないので極悪になってるという。
まとめ
とにかく視覚的フロートは気をつけて実装したほうが良いと思う。特にフロートさせた後に何かユーザがアクションする必要がある場合、余計な操作でも許容するような実装、つまり再度ボタンクリックするか、領域外クリックで閉じるようにしておかないと、ある意味謀反が起きてもしょうがないのかもしれない。俺は何度もGoogleのフィードバックで、こういうのはやめてほしい、こうしてほしいとクレームと提案を繰り返したが、一向に反映されてないのを見ると、クレームはそのままIT焼却炉行きなのかな、と思えてしまう。
いろいろ残念なことが多発するので、こういった視覚的なフロートは要注意だ。
facebook
twitter
google+
fb share