スマートフォン(タッチデバイス)とプルダウンメニュー

半分以上雑談ですが、iPhoneやAndroid端末とプルダウンメニューについて。(ドロップダウンともいいますが)
タッチで操作する機械は、マウスオーバーというものが無いです。
指を乗せたら即クリックとして動作するわけですね。

そういうことを何度もご説明しても、クライアント様にご理解頂けない場合があります。私が説明ベタなんでしょう、きっと。
結局、最終的にはナビゲーションとサイト全体の構成について見直すことにしてとりあえずiOSに対応したいという作業を受けました。

で、いろいろやっていて気づいたのですが、jQueryのhoverは、iOSでマウスオーバー的な動作をするのですね。具体的には一回タッチでマウスオーバー、もう一度同じ場所タッチでクリックになります。
今回はこれを以てiOS対応とするということで決着しました。(今後ずっとhoverがこの動作という保証はない)

が、この対応はおかしいですよね。
これはAndroidでは期待した動作をしません。すぐに移動しちゃいます。
(長押しすると右クリック的に動作するらしくサブメニューが出ますが、別の機能メニューもでてしまいますし、そもそもそんな操作分かるわけ無い)

結局は、

●プルダウンメニュー等、マウスオーバーを前提としたナビゲーションは廃止する
→ゴール
●プルダウンが最悪使えなくても、全てのページに回れるようにする
→例えばANAとかそうなってると思います。
●端末毎に振り分ける
→こういう対症療法はとりたくない。端末の種類が増えるとどう振り分けて良いか…
というか、Windows7のタッチデバイスがあると、無理でしょ(?)
●タッチデバイスを切り捨てる
→潔い! カッコイイ! でもそうは行かないですよねぇ、これからは。


ということで、メニューの作り方はサイト全体の構成にも影響しますので、これから作るものはタッチでも操作しやすいことも考えないといけないと、そういうわけです。
--

コメント